439 lines
15 KiB
TypeScript
439 lines
15 KiB
TypeScript
'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>
|
|
)
|
|
}
|