diff --git a/public/assets/images/Re_Logo.png b/public/assets/images/Re_Logo.png new file mode 100644 index 0000000..6ceec94 Binary files /dev/null and b/public/assets/images/Re_Logo.png differ diff --git a/public/assets/images/become_a_dealer.webp b/public/assets/images/become_a_dealer.webp new file mode 100644 index 0000000..02e12d7 Binary files /dev/null and b/public/assets/images/become_a_dealer.webp differ diff --git a/src/components/public/ApplicationFormPage.tsx b/src/components/public/ApplicationFormPage.tsx index 8ba4619..c5b3a6a 100644 --- a/src/components/public/ApplicationFormPage.tsx +++ b/src/components/public/ApplicationFormPage.tsx @@ -1,14 +1,10 @@ import { useState, useEffect } from 'react'; import { Button } from '../ui/button'; import { Input } from '../ui/input'; -import { Label } from '../ui/label'; import { Textarea } from '../ui/textarea'; -import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui/select'; -import { RadioGroup, RadioGroupItem } from '../ui/radio-group'; import { Checkbox } from '../ui/checkbox'; -import { CheckCircle, Users, Star, LogIn, Award, TrendingUp, Handshake } from 'lucide-react'; +import { LogIn, ChevronRight, ChevronDown } from 'lucide-react'; import { toast } from 'sonner'; -// import backgroundImage from 'figma:asset/ee01d864b6e23a8197b42f3168c98eedec9d2440.png'; import { onboardingService } from '../../services/onboarding.service'; import { masterService } from '../../services/master.service'; @@ -18,7 +14,7 @@ interface ApplicationFormPageProps { export function ApplicationFormPage({ onAdminLogin }: ApplicationFormPageProps) { const [formData, setFormData] = useState({ - country: 'India', // Default to India + country: 'India', stateId: '', districtId: '', name: '', @@ -38,19 +34,16 @@ export function ApplicationFormPage({ onAdminLogin }: ApplicationFormPageProps) acceptTerms: false }); + const [otpVerified, setOtpVerified] = useState(false); const [states, setStates] = useState([]); const [districts, setDistricts] = useState([]); - const [fetchingStates, setFetchingStates] = useState(false); - const [fetchingDistricts, setFetchingDistricts] = useState(false); useEffect(() => { fetchStates(); }, []); const fetchStates = async () => { - setFetchingStates(true); try { - // ZoneID is optional, public API should return all states if no zone override const response: any = await masterService.getStates(); if (response && response.data) { setStates(response.data); @@ -59,40 +52,36 @@ export function ApplicationFormPage({ onAdminLogin }: ApplicationFormPageProps) } } catch (error) { console.error('Error fetching states:', error); - toast.error('Failed to load states. Please refresh the page.'); - } finally { - setFetchingStates(false); } }; - const handleStateChange = async (selectedState: any) => { - if (!selectedState) return; - - setFormData(prev => ({ ...prev, stateId: selectedState.id, districtId: '' })); + const handleStateChange = async (stateId: string) => { + if (!stateId) return; + setFormData(prev => ({ ...prev, stateId, districtId: '' })); setDistricts([]); - setFetchingDistricts(true); - try { - const response: any = await masterService.getDistricts(selectedState.id); - if (response && response.data) { - setDistricts(response.data); - } else if (response && response.districts) { - setDistricts(response.districts); - } + const response: any = await masterService.getDistricts(stateId); + if (response && response.data) setDistricts(response.data); + else if (response && response.districts) setDistricts(response.districts); } catch (error) { console.error('Error fetching districts:', error); - toast.error('Failed to load districts.'); - } finally { - setFetchingDistricts(false); } }; - + const handleVerifyMobile = () => { + if (!formData.mobile || formData.mobile.length < 10) { + toast.error('Please enter a valid mobile number'); + return; + } + toast.success('OTP sent to ' + formData.mobile); + setTimeout(() => { + setOtpVerified(true); + toast.success('Mobile number verified'); + }, 1500); + }; const handleSubmit = async (e: React.FormEvent) => { e.preventDefault(); - - // Validate required fields if (!formData.country || !formData.stateId || !formData.districtId || !formData.name || !formData.interestedCity || !formData.email || !formData.pincode || !formData.mobile || !formData.ownRoyalEnfield || !formData.age || !formData.education || @@ -102,10 +91,9 @@ export function ApplicationFormPage({ onAdminLogin }: ApplicationFormPageProps) return; } - // Validate Royal Enfield model - if (formData.ownRoyalEnfield === 'yes' && !formData.royalEnfieldModel) { - toast.error('Please select your Royal Enfield model'); - return; + if (!otpVerified) { + toast.error('Please verify your mobile number'); + return; } if (!formData.acceptTerms) { @@ -119,604 +107,337 @@ export function ApplicationFormPage({ onAdminLogin }: ApplicationFormPageProps) const stateName = selectedState?.name || selectedState?.stateName || ''; const districtName = selectedDistrict?.name || selectedDistrict?.districtName || ''; - // Map form data to backend expected format const payload = { applicantName: formData.name, email: formData.email, phone: formData.mobile, state: stateName, - city: formData.interestedCity, // Or district? - district: districtName, // Backward compatibility + city: formData.interestedCity, + district: districtName, preferredLocation: `${formData.interestedCity}, ${stateName}`, - businessType: 'Dealership', // Default or derived + businessType: 'Dealership', locationType: 'district', locationId: formData.districtId, - address: formData.address, // Need backend support? - pincode: formData.pincode, // Need backend support? + address: formData.address, + pincode: formData.pincode, age: formData.age, education: formData.education, companyName: formData.companyName, source: formData.source, - existingDealer: formData.existingDealer, - ownRoyalEnfield: formData.ownRoyalEnfield, + existingDealer: formData.existingDealer === 'yes', + ownRoyalEnfield: formData.ownRoyalEnfield === 'yes', royalEnfieldModel: formData.royalEnfieldModel, description: formData.description, - // flexible fields for now - experienceYears: 0, // Not in form - investmentCapacity: 'Unknown' // Not in form + experienceYears: 0, + investmentCapacity: 'Unknown' }; await onboardingService.submitApplication(payload); - toast.success('Application submitted successfully! We will contact you soon.'); - - // Reset form + toast.success('Application submitted successfully'); + setFormData({ country: 'India', stateId: '', districtId: '', name: '', interestedCity: '', email: '', pincode: '', mobile: '', ownRoyalEnfield: '', royalEnfieldModel: '', age: '', education: '', companyName: '', source: '', existingDealer: '', description: '', address: '', acceptTerms: false }); - + setOtpVerified(false); } catch (error: any) { toast.error(error.response?.data?.message || 'Failed to submit application.'); } }; + const reModels = [ + "Classic 650", "Scram 440", "Goan Classic 350", "Bear 650", "Guerrilla 450", + "Shotgun 650", "Himalayan 450", "Bullet 350", "Super Meteor 650", "Hunter 350", + "Scram 411", "Meteor 350", "Interceptor INT 650", "Continental GT 650", + "Classic 350", "Other Royal Enfield motorcycle" + ]; + + const sourceOptions = [ + "Existing RE dealer", "Customer", "RE Employee", "News Paper", "Website", "Friends", "Others" + ]; + return ( -
- {/* Header */} -
-
-
-
- RE -
-
-

Royal Enfield

-

Dealer Partnership Portal

-
-
- -
-
+
+ {/* Background Image Wrapper */} +
+ Royal Enfield Background +
+
- {/* Hero Section */} -
-
-
-
+ {/* Navigation Header */} + -
-
-
-

Since 1901 • Legacy of Excellence

-
-
-

- Join the Royal Enfield - - Partnership Network - -

-

- Become part of our legendary heritage and bring the spirit of Pure Motorcycling to riders in your community -

-
-
-
- -
- 120+ Year Heritage -
-
-
- -
- Global Recognition -
-
-
- -
- Premium Support -
-
-
-
- - {/* Why Partner Section */} -
-
-
-

Why Partner With Royal Enfield?

-

Unmatched benefits for ambitious entrepreneurs

-
-
- {/* Premium Brand */} -
-
- -
-

Premium Brand

-

- Represent a legendary brand trusted by millions worldwide since 1901 + {/* Main Content Area over the background */} +

+ {/* Content Container with white background */} +
+ + {/* Introductory Text */} +
+

Become a Dealer

+
+

+ At Royal Enfield, we endeavour to partner our patrons and customers in their journeys of exploration. Our main objective is to provide an immersive brand and retail experience in addition to ensuring a superior product experience. Our dealers, distributors and network teams are our extended partners in this task. +

+

+ Royal Enfield employs a comprehensive and professional process for Dealership allotment. Dealer selection is done based on a variety of criteria including a personal meeting with the applicant. It is only post completion of the evaluation and selection process, that other formalities are considered. +

+

+ Royal Enfield does not accept or demand money / deposits from prospective partners prior to processing the application or candidature of the Dealership. +

+

+ If you receive any communication offering allotment of Royal Enfield Dealership against payment / transfer of money and / or otherwise, we advise you to seek information / clarifications by writing to us at support@royalenfield.com or by contacting us on our customer care toll-free number 1800 210 0008. +

+

+ *This is the ONLY official website and central number for dealership enquiries for Royal Enfield and we do not have any other partner website(s).

+
- {/* Strong Support */} -
-
- -
-

Complete Support

-

- Comprehensive training, marketing, and ongoing operational support -

-
- - {/* Growth Opportunity */} -
-
- -
-

Growth Potential

-

- Tap into expanding markets with increasing customer demand -

-
- - {/* Proven Success */} -
-
- -
-

Proven Model

-

- Join thousands of successful dealers in our global network -

-
-
-
-
- - {/* Application Form Section */} -
- {/* Background Image with Overlay */} -
-
-
- -
-
-
-
-

Start Your Journey

-
-
-

Dealership Application

-

- Complete the form below to begin your partnership with Royal Enfield -

-
- -
-
- {/* Name & Email */} -
-
- - setFormData({ ...formData, name: e.target.value })} - className="bg-slate-800/50 border-slate-600/50 text-white placeholder:text-slate-500 focus:border-amber-500/50 focus:ring-amber-500/20" - required - /> -
-
- - setFormData({ ...formData, email: e.target.value })} - className="bg-slate-800/50 border-slate-600/50 text-white placeholder:text-slate-500 focus:border-amber-500/50 focus:ring-amber-500/20" - required - /> -
-
- - {/* Mobile & Age */} -
-
- - setFormData({ ...formData, mobile: e.target.value })} - className="bg-slate-800/50 border-slate-600/50 text-white placeholder:text-slate-500 focus:border-amber-500/50 focus:ring-amber-500/20" - required - /> -
-
- - setFormData({ ...formData, age: e.target.value })} - className="bg-slate-800/50 border-slate-600/50 text-white placeholder:text-slate-500 focus:border-amber-500/50 focus:ring-amber-500/20" - required - /> -
-
- - {/* Country, State, District */} + {/* Form */} + + {/* Country Selection */}
-
- - +
+ +
-
- - { - const selectedState = states.find((s: any) => s.id === value); - handleStateChange(selectedState); - }} - disabled={fetchingStates} + onChange={(e) => handleStateChange(e.target.value)} > - - - - - {states.map((state: any) => ( - - {state.name || state.stateName} - - ))} - - + + {states.map(s => )} + +
-
- - setFormData({ ...formData, districtId: value })} - disabled={!formData.stateId || fetchingDistricts} + onChange={(e) => setFormData({...formData, districtId: e.target.value})} > - - - - - {districts.map((district: any) => ( - - {district.name || district.districtName} - - ))} - - + + {districts.map(d => )} + +
- {/* Interested City & Pincode */} -
-
- - setFormData({ ...formData, interestedCity: e.target.value })} - className="bg-slate-800/50 border-slate-600/50 text-white placeholder:text-slate-500 focus:border-amber-500/50 focus:ring-amber-500/20" - required + {/* Personal Details - Two Column */} +
+ setFormData({...formData, name: e.target.value})} + /> + setFormData({...formData, interestedCity: e.target.value})} + /> + setFormData({...formData, email: e.target.value})} + /> + setFormData({...formData, pincode: e.target.value})} + /> + +
+ setFormData({...formData, mobile: e.target.value})} /> + {!otpVerified ? ( + + ) : ( + Verified + )}
-
- - setFormData({ ...formData, pincode: e.target.value })} - className="bg-slate-800/50 border-slate-600/50 text-white placeholder:text-slate-500 focus:border-amber-500/50 focus:ring-amber-500/20" - required - /> -
-
- {/* Education & Company Name */} -
-
- - -
-
- - setFormData({ ...formData, companyName: e.target.value })} - className="bg-slate-800/50 border-slate-600/50 text-white placeholder:text-slate-500 focus:border-amber-500/50 focus:ring-amber-500/20" - required - /> -
-
- - {/* Source */} -
- - -
- - {/* Do you own a Royal Enfield? */} -
- - setFormData({ ...formData, ownRoyalEnfield: value, royalEnfieldModel: value === 'no' ? '' : formData.royalEnfieldModel })}> -
-
- - +
+ Own a Royal Enfield? +
+ {['yes', 'no'].map(val => ( +
- -
- - {/* Royal Enfield Model - Conditional */} - {formData.ownRoyalEnfield === 'yes' && ( -
- -
- )} - {/* Existing Dealer/Vendor */} -
- - setFormData({ ...formData, existingDealer: value })}> -
-
- - + setFormData({...formData, age: e.target.value})} + /> + +
+ + +
+ + setFormData({...formData, education: e.target.value})} + /> + + setFormData({...formData, companyName: e.target.value})} + /> + +
+ + +
+ +
+ Are you an existing Dealer / Vendor of Royal Enfield? +
+ {['yes', 'no'].map(val => ( +
- +
- {/* Address */} -
- -