first commit
This commit is contained in:
209
components/forms/ContactForm.tsx
Normal file
209
components/forms/ContactForm.tsx
Normal file
@@ -0,0 +1,209 @@
|
||||
'use client'
|
||||
|
||||
import { useState } from 'react'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Label } from '@/components/ui/label'
|
||||
import { Textarea } from '@/components/ui/textarea'
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
|
||||
import { Send } from 'lucide-react'
|
||||
import { toast } from 'sonner'
|
||||
|
||||
interface ContactFormProps {
|
||||
className?: string
|
||||
variant?: 'default' | 'minimal' | 'professional'
|
||||
onSubmitSuccess?: () => void
|
||||
showInquiryType?: boolean
|
||||
title?: string
|
||||
description?: string
|
||||
}
|
||||
|
||||
export default function ContactForm({}: ContactFormProps) {
|
||||
const [formData, setFormData] = useState({
|
||||
name: '',
|
||||
email: '',
|
||||
subject: '',
|
||||
message: '',
|
||||
inquiry_type: ''
|
||||
})
|
||||
const [isSubmitting, setIsSubmitting] = useState(false)
|
||||
|
||||
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
|
||||
const { name, value } = e.target
|
||||
setFormData(prev => ({
|
||||
...prev,
|
||||
[name]: value
|
||||
}))
|
||||
}
|
||||
|
||||
const handleSelectChange = (value: string) => {
|
||||
setFormData(prev => ({
|
||||
...prev,
|
||||
inquiry_type: value
|
||||
}))
|
||||
}
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
setIsSubmitting(true)
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/forms', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
formId: 'contact', // Add formId for the simplified schema
|
||||
name: formData.name,
|
||||
email: formData.email,
|
||||
subject: formData.subject,
|
||||
message: formData.message,
|
||||
inquiryType: formData.inquiry_type,
|
||||
formSource: 'contact-page'
|
||||
})
|
||||
})
|
||||
|
||||
const result = await response.json()
|
||||
|
||||
if (result.success) {
|
||||
toast.success('Message sent successfully! We\'ll get back to you soon.')
|
||||
setFormData({
|
||||
name: '',
|
||||
email: '',
|
||||
subject: '',
|
||||
message: '',
|
||||
inquiry_type: ''
|
||||
})
|
||||
} else {
|
||||
throw new Error(result.message || 'Failed to send message')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Form submission error:', error)
|
||||
toast.error('Failed to send message. Please try again.')
|
||||
} finally {
|
||||
setIsSubmitting(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="p-6 md:p-8">
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
{/* Name & Email Row */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<Label htmlFor="name" className="text-sm font-medium text-gray-700 mb-2 block">
|
||||
Name
|
||||
</Label>
|
||||
<Input
|
||||
id="name"
|
||||
name="name"
|
||||
type="text"
|
||||
placeholder="Your full name"
|
||||
value={formData.name}
|
||||
onChange={handleInputChange}
|
||||
className="h-11 rounded-lg border-gray-200 focus:border-orange-400 focus:ring-2 focus:ring-orange-100 transition-all duration-200"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="email" className="text-sm font-medium text-gray-700 mb-2 block">
|
||||
Email
|
||||
</Label>
|
||||
<Input
|
||||
id="email"
|
||||
name="email"
|
||||
type="email"
|
||||
placeholder="your@company.com"
|
||||
value={formData.email}
|
||||
onChange={handleInputChange}
|
||||
className="h-11 rounded-lg border-gray-200 focus:border-orange-400 focus:ring-2 focus:ring-orange-100 transition-all duration-200"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Inquiry Type */}
|
||||
<div>
|
||||
<Label htmlFor="inquiry_type" className="text-sm font-medium text-gray-700 mb-2 block">
|
||||
Inquiry Type
|
||||
</Label>
|
||||
<Select value={formData.inquiry_type} onValueChange={handleSelectChange}>
|
||||
<SelectTrigger className="h-11 rounded-lg border-gray-200 focus:border-orange-400 focus:ring-2 focus:ring-orange-100">
|
||||
<SelectValue placeholder="Select inquiry type" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="wholesale">Wholesale Partnership</SelectItem>
|
||||
<SelectItem value="bulk">Bulk Orders (1000+ kg)</SelectItem>
|
||||
<SelectItem value="pricing">Pricing & Catalog</SelectItem>
|
||||
<SelectItem value="partnership">Supply Chain Partnership</SelectItem>
|
||||
<SelectItem value="private-label">Private Label</SelectItem>
|
||||
<SelectItem value="export">Export & Trade</SelectItem>
|
||||
<SelectItem value="franchise">Franchise</SelectItem>
|
||||
<SelectItem value="quality">Quality Certificates</SelectItem>
|
||||
<SelectItem value="custom-packaging">Custom Packaging</SelectItem>
|
||||
<SelectItem value="general">General Inquiry</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{/* Subject */}
|
||||
<div>
|
||||
<Label htmlFor="subject" className="text-sm font-medium text-gray-700 mb-2 block">
|
||||
Subject
|
||||
</Label>
|
||||
<Input
|
||||
id="subject"
|
||||
name="subject"
|
||||
type="text"
|
||||
placeholder="Brief subject"
|
||||
value={formData.subject}
|
||||
onChange={handleInputChange}
|
||||
className="h-11 rounded-lg border-gray-200 focus:border-orange-400 focus:ring-2 focus:ring-orange-100 transition-all duration-200"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Message */}
|
||||
<div>
|
||||
<Label htmlFor="message" className="text-sm font-medium text-gray-700 mb-2 block">
|
||||
Message
|
||||
</Label>
|
||||
<Textarea
|
||||
id="message"
|
||||
name="message"
|
||||
placeholder="Tell us about your requirements, quantities, and timeline..."
|
||||
rows={5}
|
||||
value={formData.message}
|
||||
onChange={handleInputChange}
|
||||
className="rounded-lg border-gray-200 focus:border-orange-400 focus:ring-2 focus:ring-orange-100 resize-none transition-all duration-200"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Submit Button */}
|
||||
<Button
|
||||
type="submit"
|
||||
className="w-full h-12 bg-orange-600 hover:bg-orange-700 text-white font-medium rounded-lg transition-colors duration-200"
|
||||
disabled={isSubmitting}
|
||||
>
|
||||
{isSubmitting ? (
|
||||
<div className="flex items-center justify-center space-x-2">
|
||||
<div className="animate-spin rounded-full h-4 w-4 border-2 border-white border-t-transparent"></div>
|
||||
<span>Sending...</span>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex items-center justify-center space-x-2">
|
||||
<Send className="h-4 w-4" />
|
||||
<span>Send Message</span>
|
||||
</div>
|
||||
)}
|
||||
</Button>
|
||||
|
||||
<p className="text-xs text-gray-500 text-center mt-4">
|
||||
We'll respond within 24 hours
|
||||
</p>
|
||||
</form>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
517
components/forms/PartTimeRegistrationForm.tsx
Normal file
517
components/forms/PartTimeRegistrationForm.tsx
Normal file
@@ -0,0 +1,517 @@
|
||||
'use client'
|
||||
|
||||
import { useState } from 'react'
|
||||
import { motion } from 'framer-motion'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Label } from '@/components/ui/label'
|
||||
import { Textarea } from '@/components/ui/textarea'
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from '@/components/ui/dialog'
|
||||
import {
|
||||
Clock,
|
||||
User,
|
||||
Mail,
|
||||
Phone,
|
||||
MapPin,
|
||||
Briefcase,
|
||||
FileText,
|
||||
CheckCircle,
|
||||
Loader2,
|
||||
Award,
|
||||
GraduationCap
|
||||
} from 'lucide-react'
|
||||
import { toast } from 'sonner'
|
||||
|
||||
interface PartTimeRegistrationFormProps {
|
||||
isOpen: boolean
|
||||
onClose: () => void
|
||||
}
|
||||
|
||||
interface PartTimeFormData {
|
||||
// Personal Information
|
||||
firstName: string
|
||||
lastName: string
|
||||
email: string
|
||||
phone: string
|
||||
age: string
|
||||
gender: string
|
||||
|
||||
// Address Information
|
||||
address: string
|
||||
city: string
|
||||
state: string
|
||||
zipCode: string
|
||||
|
||||
// Professional Information
|
||||
education: string
|
||||
experience: string
|
||||
preferredRole: string
|
||||
availableHours: string
|
||||
availableDays: string
|
||||
|
||||
// Additional Information
|
||||
skills: string
|
||||
motivation: string
|
||||
previousWorkExperience: string
|
||||
languagesKnown: string
|
||||
}
|
||||
|
||||
export default function PartTimeRegistrationForm({ isOpen, onClose }: PartTimeRegistrationFormProps) {
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [showSuccessModal, setShowSuccessModal] = useState(false)
|
||||
const [loginCredentials, setLoginCredentials] = useState<{
|
||||
email: string
|
||||
password: string
|
||||
} | null>(null)
|
||||
|
||||
const [formData, setFormData] = useState<PartTimeFormData>({
|
||||
firstName: '',
|
||||
lastName: '',
|
||||
email: '',
|
||||
phone: '',
|
||||
age: '',
|
||||
gender: '',
|
||||
address: '',
|
||||
city: '',
|
||||
state: '',
|
||||
zipCode: '',
|
||||
education: '',
|
||||
experience: '',
|
||||
preferredRole: '',
|
||||
availableHours: '',
|
||||
availableDays: '',
|
||||
skills: '',
|
||||
motivation: '',
|
||||
previousWorkExperience: '',
|
||||
languagesKnown: ''
|
||||
})
|
||||
|
||||
const handleInputChange = (field: keyof PartTimeFormData, value: string) => {
|
||||
setFormData(prev => ({
|
||||
...prev,
|
||||
[field]: value
|
||||
}))
|
||||
}
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
setLoading(true)
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/part-time/register', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify(formData),
|
||||
})
|
||||
|
||||
const data = await response.json()
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(data.message || 'Registration failed')
|
||||
}
|
||||
|
||||
setLoginCredentials(data.loginCredentials)
|
||||
setShowSuccessModal(true)
|
||||
onClose() // Close the main registration modal
|
||||
|
||||
// Reset form
|
||||
setFormData({
|
||||
firstName: '',
|
||||
lastName: '',
|
||||
email: '',
|
||||
phone: '',
|
||||
age: '',
|
||||
gender: '',
|
||||
address: '',
|
||||
city: '',
|
||||
state: '',
|
||||
zipCode: '',
|
||||
education: '',
|
||||
experience: '',
|
||||
preferredRole: '',
|
||||
availableHours: '',
|
||||
availableDays: '',
|
||||
skills: '',
|
||||
motivation: '',
|
||||
previousWorkExperience: '',
|
||||
languagesKnown: ''
|
||||
})
|
||||
|
||||
toast.success('Sales Executive application submitted successfully!')
|
||||
} catch (error) {
|
||||
console.error('Registration error:', error)
|
||||
toast.error(error instanceof Error ? error.message : 'Application submission failed')
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Dialog open={isOpen} onOpenChange={onClose}>
|
||||
<DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="text-2xl flex items-center">
|
||||
<Briefcase className="h-6 w-6 mr-3" />
|
||||
Sales Executive Application
|
||||
</DialogTitle>
|
||||
<DialogDescription>
|
||||
Apply for our Sales Executive position with guaranteed ₹10,000 salary + 1% commission
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="flex items-center justify-center gap-4 mb-6">
|
||||
<Badge className="bg-green-100 text-green-800 px-4 py-2">
|
||||
<Clock className="h-4 w-4 mr-2" />
|
||||
₹10,000 Guaranteed
|
||||
</Badge>
|
||||
<Badge className="bg-blue-100 text-blue-800 px-4 py-2">
|
||||
<Award className="h-4 w-4 mr-2" />
|
||||
1% Sales Commission
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
{/* Personal Information */}
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-gray-900 mb-4 flex items-center">
|
||||
<User className="h-5 w-5 mr-2 text-green-600" />
|
||||
Personal Information
|
||||
</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<Label htmlFor="firstName">First Name *</Label>
|
||||
<Input
|
||||
id="firstName"
|
||||
value={formData.firstName}
|
||||
onChange={(e) => handleInputChange('firstName', e.target.value)}
|
||||
required
|
||||
className="mt-1"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="lastName">Last Name *</Label>
|
||||
<Input
|
||||
id="lastName"
|
||||
value={formData.lastName}
|
||||
onChange={(e) => handleInputChange('lastName', e.target.value)}
|
||||
required
|
||||
className="mt-1"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="email">Email Address *</Label>
|
||||
<Input
|
||||
id="email"
|
||||
type="email"
|
||||
value={formData.email}
|
||||
onChange={(e) => handleInputChange('email', e.target.value)}
|
||||
required
|
||||
className="mt-1"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="phone">Phone Number *</Label>
|
||||
<Input
|
||||
id="phone"
|
||||
value={formData.phone}
|
||||
onChange={(e) => handleInputChange('phone', e.target.value)}
|
||||
required
|
||||
className="mt-1"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="age">Age *</Label>
|
||||
<Input
|
||||
id="age"
|
||||
type="number"
|
||||
value={formData.age}
|
||||
onChange={(e) => handleInputChange('age', e.target.value)}
|
||||
required
|
||||
className="mt-1"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="gender">Gender *</Label>
|
||||
<Select value={formData.gender} onValueChange={(value) => handleInputChange('gender', value)}>
|
||||
<SelectTrigger className="mt-1">
|
||||
<SelectValue placeholder="Select gender" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="male">Male</SelectItem>
|
||||
<SelectItem value="female">Female</SelectItem>
|
||||
<SelectItem value="other">Other</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Address Information */}
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-gray-900 mb-4 flex items-center">
|
||||
<MapPin className="h-5 w-5 mr-2 text-green-600" />
|
||||
Address Information
|
||||
</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div className="md:col-span-2">
|
||||
<Label htmlFor="address">Full Address *</Label>
|
||||
<Input
|
||||
id="address"
|
||||
value={formData.address}
|
||||
onChange={(e) => handleInputChange('address', e.target.value)}
|
||||
required
|
||||
className="mt-1"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="city">City *</Label>
|
||||
<Input
|
||||
id="city"
|
||||
value={formData.city}
|
||||
onChange={(e) => handleInputChange('city', e.target.value)}
|
||||
required
|
||||
className="mt-1"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="state">State *</Label>
|
||||
<Input
|
||||
id="state"
|
||||
value={formData.state}
|
||||
onChange={(e) => handleInputChange('state', e.target.value)}
|
||||
required
|
||||
className="mt-1"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="zipCode">ZIP Code *</Label>
|
||||
<Input
|
||||
id="zipCode"
|
||||
value={formData.zipCode}
|
||||
onChange={(e) => handleInputChange('zipCode', e.target.value)}
|
||||
required
|
||||
className="mt-1"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Professional Information */}
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-gray-900 mb-4 flex items-center">
|
||||
<GraduationCap className="h-5 w-5 mr-2 text-green-600" />
|
||||
Sales Experience & Availability
|
||||
</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<Label htmlFor="education">Education Level *</Label>
|
||||
<Select value={formData.education} onValueChange={(value) => handleInputChange('education', value)}>
|
||||
<SelectTrigger className="mt-1">
|
||||
<SelectValue placeholder="Select education level" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="high-school">High School</SelectItem>
|
||||
<SelectItem value="diploma">Diploma</SelectItem>
|
||||
<SelectItem value="bachelor">Bachelor's Degree</SelectItem>
|
||||
<SelectItem value="master">Master's Degree</SelectItem>
|
||||
<SelectItem value="other">Other</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="experience">Work Experience *</Label>
|
||||
<Select value={formData.experience} onValueChange={(value) => handleInputChange('experience', value)}>
|
||||
<SelectTrigger className="mt-1">
|
||||
<SelectValue placeholder="Select experience level" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="fresher">Fresher (0 years)</SelectItem>
|
||||
<SelectItem value="1-2">1-2 years</SelectItem>
|
||||
<SelectItem value="3-5">3-5 years</SelectItem>
|
||||
<SelectItem value="5+">5+ years</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="preferredRole">Position *</Label>
|
||||
<Select value={formData.preferredRole} onValueChange={(value) => handleInputChange('preferredRole', value)}>
|
||||
<SelectTrigger className="mt-1">
|
||||
<SelectValue placeholder="Select position" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="sales-executive">Sales Executive</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="availableHours">Available Hours per Day *</Label>
|
||||
<Select value={formData.availableHours} onValueChange={(value) => handleInputChange('availableHours', value)}>
|
||||
<SelectTrigger className="mt-1">
|
||||
<SelectValue placeholder="Select available hours" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="2-3">2-3 hours</SelectItem>
|
||||
<SelectItem value="4-5">4-5 hours</SelectItem>
|
||||
<SelectItem value="6-7">6-7 hours</SelectItem>
|
||||
<SelectItem value="8+">8+ hours</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="md:col-span-2">
|
||||
<Label htmlFor="availableDays">Available Days *</Label>
|
||||
<Select value={formData.availableDays} onValueChange={(value) => handleInputChange('availableDays', value)}>
|
||||
<SelectTrigger className="mt-1">
|
||||
<SelectValue placeholder="Select available days" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="weekdays">Weekdays (Mon-Fri)</SelectItem>
|
||||
<SelectItem value="weekends">Weekends (Sat-Sun)</SelectItem>
|
||||
<SelectItem value="all-days">All Days</SelectItem>
|
||||
<SelectItem value="flexible">Flexible</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Additional Information */}
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-gray-900 mb-4 flex items-center">
|
||||
<FileText className="h-5 w-5 mr-2 text-green-600" />
|
||||
Additional Information
|
||||
</h3>
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<Label htmlFor="skills">Skills & Expertise</Label>
|
||||
<Textarea
|
||||
id="skills"
|
||||
value={formData.skills}
|
||||
onChange={(e) => handleInputChange('skills', e.target.value)}
|
||||
placeholder="List your relevant skills, software knowledge, etc."
|
||||
className="mt-1"
|
||||
rows={3}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="languagesKnown">Languages Known</Label>
|
||||
<Input
|
||||
id="languagesKnown"
|
||||
value={formData.languagesKnown}
|
||||
onChange={(e) => handleInputChange('languagesKnown', e.target.value)}
|
||||
placeholder="e.g., Hindi, English, Regional languages"
|
||||
className="mt-1"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="previousWorkExperience">Previous Work Experience</Label>
|
||||
<Textarea
|
||||
id="previousWorkExperience"
|
||||
value={formData.previousWorkExperience}
|
||||
onChange={(e) => handleInputChange('previousWorkExperience', e.target.value)}
|
||||
placeholder="Describe your previous work experience (if any)"
|
||||
className="mt-1"
|
||||
rows={3}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="motivation">Why do you want to join our sales team? *</Label>
|
||||
<Textarea
|
||||
id="motivation"
|
||||
value={formData.motivation}
|
||||
onChange={(e) => handleInputChange('motivation', e.target.value)}
|
||||
placeholder="Tell us about your interest in sales and what motivates you"
|
||||
className="mt-1"
|
||||
rows={4}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Submit Button */}
|
||||
<div className="pt-6">
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
className="w-full bg-gradient-to-r from-green-600 to-green-700 hover:from-green-700 hover:to-green-800 text-white font-semibold py-3 rounded-lg transition-all duration-200"
|
||||
>
|
||||
{loading ? (
|
||||
<>
|
||||
<Loader2 className="h-5 w-5 mr-2 animate-spin" />
|
||||
Submitting Application...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Briefcase className="h-5 w-5 mr-2" />
|
||||
Submit Application
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
{/* Success Modal */}
|
||||
<Dialog open={showSuccessModal} onOpenChange={setShowSuccessModal}>
|
||||
<DialogContent className="max-w-md">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="flex items-center text-green-600">
|
||||
<CheckCircle className="h-6 w-6 mr-2" />
|
||||
Application Submitted!
|
||||
</DialogTitle>
|
||||
<DialogDescription asChild>
|
||||
<div className="space-y-4">
|
||||
<p>Your Sales Executive application has been submitted successfully!</p>
|
||||
|
||||
{loginCredentials && (
|
||||
<div className="bg-gray-50 p-4 rounded-lg">
|
||||
<h4 className="font-semibold mb-2">Your Login Credentials:</h4>
|
||||
<p><strong>Email:</strong> {loginCredentials.email}</p>
|
||||
<p><strong>Password:</strong> {loginCredentials.password}</p>
|
||||
<p className="text-sm text-gray-600 mt-2">
|
||||
Please save these credentials. You'll receive a welcome email shortly.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="bg-green-50 p-4 rounded-lg">
|
||||
<h4 className="font-semibold mb-2">What's Next?</h4>
|
||||
<ul className="text-sm space-y-1">
|
||||
<li>• Our sales team will review your application</li>
|
||||
<li>• You'll receive a call within 2-3 business days</li>
|
||||
<li>• Complete the interview process</li>
|
||||
<li>• Start earning ₹10,000 + 1% commission!</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="flex justify-end">
|
||||
<Button onClick={() => setShowSuccessModal(false)}>
|
||||
Close
|
||||
</Button>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</>
|
||||
)
|
||||
}
|
||||
438
components/forms/PartnershipApplicationForm.tsx
Normal file
438
components/forms/PartnershipApplicationForm.tsx
Normal file
@@ -0,0 +1,438 @@
|
||||
'use client'
|
||||
|
||||
import { useState, useEffect } from 'react'
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Label } from '@/components/ui/label'
|
||||
import { Textarea } from '@/components/ui/textarea'
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
import { toast } from 'sonner'
|
||||
import { Loader2, CheckCircle, Crown, Award, Star } from 'lucide-react'
|
||||
import { signIn } from 'next-auth/react'
|
||||
|
||||
interface PartnershipApplicationFormProps {
|
||||
isOpen: boolean
|
||||
onClose: () => void
|
||||
selectedTier?: string
|
||||
}
|
||||
|
||||
export default function PartnershipApplicationForm({
|
||||
isOpen,
|
||||
onClose,
|
||||
selectedTier = 'Silver'
|
||||
}: PartnershipApplicationFormProps) {
|
||||
const [formData, setFormData] = useState({
|
||||
firstName: '',
|
||||
lastName: '',
|
||||
email: '',
|
||||
phone: '',
|
||||
businessName: '',
|
||||
businessType: '',
|
||||
experience: '',
|
||||
partnershipTier: selectedTier,
|
||||
expectedCustomers: '',
|
||||
address: '',
|
||||
city: '',
|
||||
state: '',
|
||||
zipCode: '',
|
||||
motivation: '',
|
||||
marketingPlan: ''
|
||||
})
|
||||
|
||||
const [isSubmitting, setIsSubmitting] = useState(false)
|
||||
const [isSuccess, setIsSuccess] = useState(false)
|
||||
|
||||
// Update form data when selectedTier prop changes
|
||||
useEffect(() => {
|
||||
setFormData(prev => ({ ...prev, partnershipTier: selectedTier }))
|
||||
}, [selectedTier])
|
||||
|
||||
// Reset form when modal opens
|
||||
useEffect(() => {
|
||||
if (isOpen) {
|
||||
setFormData({
|
||||
firstName: '',
|
||||
lastName: '',
|
||||
email: '',
|
||||
phone: '',
|
||||
businessName: '',
|
||||
businessType: '',
|
||||
experience: '',
|
||||
partnershipTier: selectedTier,
|
||||
expectedCustomers: '',
|
||||
address: '',
|
||||
city: '',
|
||||
state: '',
|
||||
zipCode: '',
|
||||
motivation: '',
|
||||
marketingPlan: ''
|
||||
})
|
||||
setIsSuccess(false)
|
||||
setIsSubmitting(false)
|
||||
}
|
||||
}, [isOpen, selectedTier])
|
||||
|
||||
const handleInputChange = (field: string, value: string) => {
|
||||
setFormData(prev => ({ ...prev, [field]: value }))
|
||||
}
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
setIsSubmitting(true)
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/partnership/apply', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
...formData,
|
||||
expectedCustomers: parseInt(formData.expectedCustomers) || 0
|
||||
}),
|
||||
})
|
||||
|
||||
const result = await response.json()
|
||||
|
||||
if (result.success) {
|
||||
setIsSuccess(true)
|
||||
toast.success('Application submitted successfully! Check your email for login details.')
|
||||
|
||||
// Auto-login the user after successful registration
|
||||
setTimeout(async () => {
|
||||
try {
|
||||
await signIn('credentials', {
|
||||
email: formData.email,
|
||||
redirect: false
|
||||
})
|
||||
window.location.href = '/dashboard'
|
||||
} catch (error) {
|
||||
console.error('Auto-login failed:', error)
|
||||
}
|
||||
}, 2000)
|
||||
} else {
|
||||
toast.error(result.message || 'Application failed. Please try again.')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Application error:', error)
|
||||
toast.error('Something went wrong. Please try again.')
|
||||
} finally {
|
||||
setIsSubmitting(false)
|
||||
}
|
||||
}
|
||||
|
||||
const getTierIcon = (tier: string) => {
|
||||
switch (tier) {
|
||||
case 'Diamond': return Crown
|
||||
case 'Gold': return Award
|
||||
case 'Silver': return Star
|
||||
default: return Star
|
||||
}
|
||||
}
|
||||
|
||||
const getTierColor = (tier: string) => {
|
||||
switch (tier) {
|
||||
case 'Diamond': return '#3B82F6'
|
||||
case 'Gold': return '#F59E0B'
|
||||
case 'Silver': return '#8B5CF6'
|
||||
default: return '#8B5CF6'
|
||||
}
|
||||
}
|
||||
|
||||
const getTierMaxCustomers = (tier: string) => {
|
||||
switch (tier) {
|
||||
case 'Diamond': return 3000
|
||||
case 'Gold': return 1500
|
||||
case 'Silver': return 500
|
||||
default: return 500
|
||||
}
|
||||
}
|
||||
|
||||
if (isSuccess) {
|
||||
return (
|
||||
<Dialog open={isOpen} onOpenChange={onClose}>
|
||||
<DialogContent className="max-w-md">
|
||||
<div className="text-center py-8">
|
||||
<CheckCircle className="h-16 w-16 text-green-500 mx-auto mb-4" />
|
||||
<h3 className="text-xl font-semibold text-gray-900 mb-2">
|
||||
Application Submitted!
|
||||
</h3>
|
||||
<p className="text-gray-600 mb-4">
|
||||
Welcome to Padmaaja Rasooi! Check your email for login details.
|
||||
</p>
|
||||
<p className="text-sm text-gray-500 mb-6">
|
||||
You'll be automatically logged in and redirected to your dashboard.
|
||||
</p>
|
||||
<Button onClick={onClose} className="w-full">
|
||||
Close
|
||||
</Button>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<Dialog open={isOpen} onOpenChange={onClose}>
|
||||
<DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="text-2xl font-bold text-center">
|
||||
Partnership Application
|
||||
</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
{/* Selected Tier Display */}
|
||||
<Card className="mb-6">
|
||||
<CardHeader className="pb-3">
|
||||
<div className="flex items-center justify-center space-x-3">
|
||||
{(() => {
|
||||
const TierIcon = getTierIcon(formData.partnershipTier)
|
||||
return (
|
||||
<div
|
||||
className="w-12 h-12 rounded-full flex items-center justify-center"
|
||||
style={{backgroundColor: `${getTierColor(formData.partnershipTier)}20`}}
|
||||
>
|
||||
<TierIcon
|
||||
className="h-6 w-6"
|
||||
style={{color: getTierColor(formData.partnershipTier)}}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
})()}
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold">{formData.partnershipTier} Partner</h3>
|
||||
<p className="text-sm text-gray-600">
|
||||
Max {getTierMaxCustomers(formData.partnershipTier).toLocaleString()} customers
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
{/* Personal Information */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Personal Information</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<Label htmlFor="firstName">First Name *</Label>
|
||||
<Input
|
||||
id="firstName"
|
||||
value={formData.firstName}
|
||||
onChange={(e) => handleInputChange('firstName', e.target.value)}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="lastName">Last Name *</Label>
|
||||
<Input
|
||||
id="lastName"
|
||||
value={formData.lastName}
|
||||
onChange={(e) => handleInputChange('lastName', e.target.value)}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="email">Email Address *</Label>
|
||||
<Input
|
||||
id="email"
|
||||
type="email"
|
||||
value={formData.email}
|
||||
onChange={(e) => handleInputChange('email', e.target.value)}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="phone">Phone Number *</Label>
|
||||
<Input
|
||||
id="phone"
|
||||
type="tel"
|
||||
value={formData.phone}
|
||||
onChange={(e) => handleInputChange('phone', e.target.value)}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Business Information */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Business Information</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<Label htmlFor="businessName">Business Name (Optional)</Label>
|
||||
<Input
|
||||
id="businessName"
|
||||
value={formData.businessName}
|
||||
onChange={(e) => handleInputChange('businessName', e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="businessType">Business Type *</Label>
|
||||
<Select value={formData.businessType} onValueChange={(value) => handleInputChange('businessType', value)}>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select business type" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="individual">Individual</SelectItem>
|
||||
<SelectItem value="retail">Retail Store</SelectItem>
|
||||
<SelectItem value="restaurant">Restaurant/Hotel</SelectItem>
|
||||
<SelectItem value="distributor">Distributor</SelectItem>
|
||||
<SelectItem value="online">Online Business</SelectItem>
|
||||
<SelectItem value="other">Other</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="md:col-span-2">
|
||||
<Label htmlFor="experience">Experience in Food/Retail Business *</Label>
|
||||
<Select value={formData.experience} onValueChange={(value) => handleInputChange('experience', value)}>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select your experience level" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="beginner">Beginner (0-1 years)</SelectItem>
|
||||
<SelectItem value="intermediate">Intermediate (2-5 years)</SelectItem>
|
||||
<SelectItem value="experienced">Experienced (5+ years)</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Partnership Details */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Partnership Details</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<Label htmlFor="partnershipTier">Partnership Tier *</Label>
|
||||
<Select value={formData.partnershipTier} onValueChange={(value) => handleInputChange('partnershipTier', value)}>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="Silver">Silver (500 customers)</SelectItem>
|
||||
<SelectItem value="Gold">Gold (1,500 customers)</SelectItem>
|
||||
<SelectItem value="Diamond">Diamond (3,000 customers)</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="expectedCustomers">Expected Customers in First Year</Label>
|
||||
<Input
|
||||
id="expectedCustomers"
|
||||
type="number"
|
||||
value={formData.expectedCustomers}
|
||||
onChange={(e) => handleInputChange('expectedCustomers', e.target.value)}
|
||||
max={getTierMaxCustomers(formData.partnershipTier)}
|
||||
/>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Address Information */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Address Information</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div className="md:col-span-2">
|
||||
<Label htmlFor="address">Street Address *</Label>
|
||||
<Input
|
||||
id="address"
|
||||
value={formData.address}
|
||||
onChange={(e) => handleInputChange('address', e.target.value)}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="city">City *</Label>
|
||||
<Input
|
||||
id="city"
|
||||
value={formData.city}
|
||||
onChange={(e) => handleInputChange('city', e.target.value)}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="state">State *</Label>
|
||||
<Input
|
||||
id="state"
|
||||
value={formData.state}
|
||||
onChange={(e) => handleInputChange('state', e.target.value)}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="zipCode">ZIP Code *</Label>
|
||||
<Input
|
||||
id="zipCode"
|
||||
value={formData.zipCode}
|
||||
onChange={(e) => handleInputChange('zipCode', e.target.value)}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Additional Information */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Additional Information</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div>
|
||||
<Label htmlFor="motivation">Why do you want to become a partner? *</Label>
|
||||
<Textarea
|
||||
id="motivation"
|
||||
value={formData.motivation}
|
||||
onChange={(e) => handleInputChange('motivation', e.target.value)}
|
||||
required
|
||||
rows={3}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="marketingPlan">How do you plan to market our products? *</Label>
|
||||
<Textarea
|
||||
id="marketingPlan"
|
||||
value={formData.marketingPlan}
|
||||
onChange={(e) => handleInputChange('marketingPlan', e.target.value)}
|
||||
required
|
||||
rows={3}
|
||||
/>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Submit Button */}
|
||||
<div className="flex justify-end space-x-4">
|
||||
<Button type="button" variant="outline" onClick={onClose}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={isSubmitting}
|
||||
className="min-w-[120px]"
|
||||
>
|
||||
{isSubmitting ? (
|
||||
<>
|
||||
<Loader2 className="h-4 w-4 animate-spin mr-2" />
|
||||
Submitting...
|
||||
</>
|
||||
) : (
|
||||
'Submit Application'
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
465
components/forms/WholesalerRegistrationForm.tsx
Normal file
465
components/forms/WholesalerRegistrationForm.tsx
Normal file
@@ -0,0 +1,465 @@
|
||||
'use client'
|
||||
|
||||
import { useState } from 'react'
|
||||
import { motion } from 'framer-motion'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Label } from '@/components/ui/label'
|
||||
import { Textarea } from '@/components/ui/textarea'
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from '@/components/ui/dialog'
|
||||
import {
|
||||
Store,
|
||||
User,
|
||||
Mail,
|
||||
Phone,
|
||||
MapPin,
|
||||
Building,
|
||||
FileText,
|
||||
CheckCircle,
|
||||
Loader2,
|
||||
Gift
|
||||
} from 'lucide-react'
|
||||
import { toast } from 'sonner'
|
||||
|
||||
interface WholesalerRegistrationFormProps {
|
||||
isOpen: boolean
|
||||
onClose: () => void
|
||||
}
|
||||
|
||||
interface WholesalerFormData {
|
||||
// Business Information
|
||||
businessName: string
|
||||
businessType: string
|
||||
gstNumber: string
|
||||
panNumber: string
|
||||
|
||||
// Personal Information
|
||||
firstName: string
|
||||
lastName: string
|
||||
email: string
|
||||
phone: string
|
||||
|
||||
// Address Information
|
||||
address: string
|
||||
city: string
|
||||
state: string
|
||||
zipCode: string
|
||||
|
||||
// Business Details
|
||||
experience: string
|
||||
expectedOrderVolume: string
|
||||
productCategories: string
|
||||
businessDescription: string
|
||||
}
|
||||
|
||||
export default function WholesalerRegistrationForm({ isOpen, onClose }: WholesalerRegistrationFormProps) {
|
||||
const [formData, setFormData] = useState<WholesalerFormData>({
|
||||
businessName: '',
|
||||
businessType: '',
|
||||
gstNumber: '',
|
||||
panNumber: '',
|
||||
firstName: '',
|
||||
lastName: '',
|
||||
email: '',
|
||||
phone: '',
|
||||
address: '',
|
||||
city: '',
|
||||
state: '',
|
||||
zipCode: '',
|
||||
experience: '',
|
||||
expectedOrderVolume: '',
|
||||
productCategories: '',
|
||||
businessDescription: ''
|
||||
})
|
||||
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [showSuccessModal, setShowSuccessModal] = useState(false)
|
||||
const [loginCredentials, setLoginCredentials] = useState<{
|
||||
email: string
|
||||
password: string
|
||||
} | null>(null)
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
setLoading(true)
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/wholesaler/register', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify(formData),
|
||||
})
|
||||
|
||||
const data = await response.json()
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(data.message || 'Registration failed')
|
||||
}
|
||||
|
||||
setLoginCredentials(data.loginCredentials)
|
||||
setShowSuccessModal(true)
|
||||
onClose() // Close the main registration modal
|
||||
|
||||
// Reset form
|
||||
setFormData({
|
||||
businessName: '',
|
||||
businessType: '',
|
||||
gstNumber: '',
|
||||
panNumber: '',
|
||||
firstName: '',
|
||||
lastName: '',
|
||||
email: '',
|
||||
phone: '',
|
||||
address: '',
|
||||
city: '',
|
||||
state: '',
|
||||
zipCode: '',
|
||||
experience: '',
|
||||
expectedOrderVolume: '',
|
||||
productCategories: '',
|
||||
businessDescription: ''
|
||||
})
|
||||
|
||||
toast.success('Wholesaler registration successful!')
|
||||
} catch (error) {
|
||||
console.error('Registration error:', error)
|
||||
toast.error(error instanceof Error ? error.message : 'Registration failed')
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleInputChange = (field: keyof WholesalerFormData, value: string) => {
|
||||
setFormData(prev => ({ ...prev, [field]: value }))
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Dialog open={isOpen} onOpenChange={onClose}>
|
||||
<DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="text-2xl flex items-center">
|
||||
<Building className="h-6 w-6 mr-3" />
|
||||
Wholesaler Registration
|
||||
</DialogTitle>
|
||||
<DialogDescription>
|
||||
Join our network and get exclusive access to premium products with 25% wholesale discount on bulk orders
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="flex items-center justify-center gap-4 mb-6">
|
||||
<Badge className="bg-green-100 text-green-800 px-4 py-2">
|
||||
<Gift className="h-4 w-4 mr-2" />
|
||||
25% Discount
|
||||
</Badge>
|
||||
<Badge className="bg-blue-100 text-blue-800 px-4 py-2">
|
||||
<Store className="h-4 w-4 mr-2" />
|
||||
Bulk Orders
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
{/* Business Information */}
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-gray-900 mb-4 flex items-center">
|
||||
<Building className="h-5 w-5 mr-2 text-blue-600" />
|
||||
Business Information
|
||||
</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<Label htmlFor="businessName">Business Name *</Label>
|
||||
<Input
|
||||
id="businessName"
|
||||
value={formData.businessName}
|
||||
onChange={(e) => handleInputChange('businessName', e.target.value)}
|
||||
placeholder="Enter your business name"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="businessType">Business Type *</Label>
|
||||
<Select onValueChange={(value) => handleInputChange('businessType', value)}>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select business type" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="retail">Retail Store</SelectItem>
|
||||
<SelectItem value="distributor">Distributor</SelectItem>
|
||||
<SelectItem value="restaurant">Restaurant/Hotel</SelectItem>
|
||||
<SelectItem value="supermarket">Supermarket</SelectItem>
|
||||
<SelectItem value="export">Export Business</SelectItem>
|
||||
<SelectItem value="other">Other</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="gstNumber">GST Number</Label>
|
||||
<Input
|
||||
id="gstNumber"
|
||||
value={formData.gstNumber}
|
||||
onChange={(e) => handleInputChange('gstNumber', e.target.value)}
|
||||
placeholder="Enter GST number"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="panNumber">PAN Number</Label>
|
||||
<Input
|
||||
id="panNumber"
|
||||
value={formData.panNumber}
|
||||
onChange={(e) => handleInputChange('panNumber', e.target.value)}
|
||||
placeholder="Enter PAN number"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Personal Information */}
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-gray-900 mb-4 flex items-center">
|
||||
<User className="h-5 w-5 mr-2 text-blue-600" />
|
||||
Personal Information
|
||||
</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<Label htmlFor="firstName">First Name *</Label>
|
||||
<Input
|
||||
id="firstName"
|
||||
value={formData.firstName}
|
||||
onChange={(e) => handleInputChange('firstName', e.target.value)}
|
||||
placeholder="Enter your first name"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="lastName">Last Name *</Label>
|
||||
<Input
|
||||
id="lastName"
|
||||
value={formData.lastName}
|
||||
onChange={(e) => handleInputChange('lastName', e.target.value)}
|
||||
placeholder="Enter your last name"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="email">Email Address *</Label>
|
||||
<Input
|
||||
id="email"
|
||||
type="email"
|
||||
value={formData.email}
|
||||
onChange={(e) => handleInputChange('email', e.target.value)}
|
||||
placeholder="Enter your email address"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="phone">Phone Number *</Label>
|
||||
<Input
|
||||
id="phone"
|
||||
value={formData.phone}
|
||||
onChange={(e) => handleInputChange('phone', e.target.value)}
|
||||
placeholder="Enter your phone number"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Address Information */}
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-gray-900 mb-4 flex items-center">
|
||||
<MapPin className="h-5 w-5 mr-2 text-blue-600" />
|
||||
Address Information
|
||||
</h3>
|
||||
<div className="grid grid-cols-1 gap-6">
|
||||
<div>
|
||||
<Label htmlFor="address">Business Address *</Label>
|
||||
<Textarea
|
||||
id="address"
|
||||
value={formData.address}
|
||||
onChange={(e) => handleInputChange('address', e.target.value)}
|
||||
placeholder="Enter your complete business address"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div>
|
||||
<Label htmlFor="city">City *</Label>
|
||||
<Input
|
||||
id="city"
|
||||
value={formData.city}
|
||||
onChange={(e) => handleInputChange('city', e.target.value)}
|
||||
placeholder="Enter city"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="state">State *</Label>
|
||||
<Input
|
||||
id="state"
|
||||
value={formData.state}
|
||||
onChange={(e) => handleInputChange('state', e.target.value)}
|
||||
placeholder="Enter state"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="zipCode">ZIP Code *</Label>
|
||||
<Input
|
||||
id="zipCode"
|
||||
value={formData.zipCode}
|
||||
onChange={(e) => handleInputChange('zipCode', e.target.value)}
|
||||
placeholder="Enter ZIP code"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Business Details */}
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-gray-900 mb-4 flex items-center">
|
||||
<FileText className="h-5 w-5 mr-2 text-blue-600" />
|
||||
Business Details
|
||||
</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<Label htmlFor="experience">Business Experience</Label>
|
||||
<Select onValueChange={(value) => handleInputChange('experience', value)}>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select experience" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="startup">Startup (0-1 years)</SelectItem>
|
||||
<SelectItem value="growing">Growing (1-3 years)</SelectItem>
|
||||
<SelectItem value="established">Established (3-5 years)</SelectItem>
|
||||
<SelectItem value="mature">Mature (5+ years)</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="expectedOrderVolume">Expected Monthly Order Volume</Label>
|
||||
<Select onValueChange={(value) => handleInputChange('expectedOrderVolume', value)}>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select volume" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="small">Small (₹1L - ₹5L)</SelectItem>
|
||||
<SelectItem value="medium">Medium (₹5L - ₹20L)</SelectItem>
|
||||
<SelectItem value="large">Large (₹20L - ₹50L)</SelectItem>
|
||||
<SelectItem value="enterprise">Enterprise (₹50L+)</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-6">
|
||||
<Label htmlFor="productCategories">Product Categories of Interest</Label>
|
||||
<Input
|
||||
id="productCategories"
|
||||
value={formData.productCategories}
|
||||
onChange={(e) => handleInputChange('productCategories', e.target.value)}
|
||||
placeholder="e.g., Basmati Rice, Non-Basmati Rice, Organic Rice"
|
||||
/>
|
||||
</div>
|
||||
<div className="mt-6">
|
||||
<Label htmlFor="businessDescription">Business Description</Label>
|
||||
<Textarea
|
||||
id="businessDescription"
|
||||
value={formData.businessDescription}
|
||||
onChange={(e) => handleInputChange('businessDescription', e.target.value)}
|
||||
placeholder="Tell us about your business, target market, and goals"
|
||||
rows={4}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-blue-50 p-6 rounded-lg">
|
||||
<h4 className="font-semibold text-gray-900 mb-2">Wholesaler Benefits:</h4>
|
||||
<ul className="text-sm text-gray-600 space-y-1">
|
||||
<li>• 25% discount on all bulk orders</li>
|
||||
<li>• Dedicated account manager</li>
|
||||
<li>• Priority customer support</li>
|
||||
<li>• Flexible payment terms</li>
|
||||
<li>• Quality guarantee on all products</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
className="w-full bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800 text-white py-3 text-lg"
|
||||
disabled={loading}
|
||||
>
|
||||
{loading ? (
|
||||
<>
|
||||
<Loader2 className="h-5 w-5 mr-2 animate-spin" />
|
||||
Registering...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Store className="h-5 w-5 mr-2" />
|
||||
Register as Wholesaler
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
{/* Success Modal */}
|
||||
<Dialog open={showSuccessModal} onOpenChange={setShowSuccessModal}>
|
||||
<DialogContent className="max-w-md">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="flex items-center text-green-600">
|
||||
<CheckCircle className="h-6 w-6 mr-2" />
|
||||
Registration Successful!
|
||||
</DialogTitle>
|
||||
<DialogDescription asChild>
|
||||
<div className="space-y-4">
|
||||
<p>Your wholesaler account has been created successfully!</p>
|
||||
|
||||
{loginCredentials && (
|
||||
<div className="bg-gray-50 p-4 rounded-lg">
|
||||
<h4 className="font-semibold mb-2">Your Login Credentials:</h4>
|
||||
<div className="space-y-2 text-sm">
|
||||
<div>
|
||||
<span className="font-medium">Email:</span> {loginCredentials.email}
|
||||
</div>
|
||||
<div>
|
||||
<span className="font-medium">Password:</span> {loginCredentials.password}
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-xs text-gray-600 mt-2">
|
||||
Please save these credentials and change your password after first login.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="text-sm text-gray-600">
|
||||
<p>• You will receive a confirmation email shortly</p>
|
||||
<p>• Our team will contact you within 24 hours</p>
|
||||
<p>• You can now access 25% wholesale discounts</p>
|
||||
</div>
|
||||
</div>
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user