feat(leads): Lead Creation Phase 4 — Property section with address, state select, and photo upload

- LeadPropertySection: Street Address (with pin icon), City/State/ZIP row (flex layout, ZIP auto-strips non-digits to 5 chars, state defaults to TX), Property Type dropdown and Site Photos (Full Form only, animate in/out)
- Photo upload: dashed zone with Camera + Image icons, hover highlight in emerald, hidden file input with capture=environment (opens camera on mobile), multiple selection allowed
- Thumbnails: 4-col grid, spring scale-in animation, hover overlay with X to remove individual photos
- Focus ring accent changed to emerald to match section color identity (blue=contact, emerald=property)
- CreateLeadPage: propertyPhotos added to INITIAL_FORM, sectionCompletion.property live (address + city required), LeadPropertySection wired into renderSectionContent
This commit is contained in:
Satyam
2026-03-13 16:22:54 +05:30
parent d8868f67f1
commit 205ada99e9
2 changed files with 284 additions and 2 deletions
+13 -2
View File
@@ -10,6 +10,7 @@ import {
import LeadSectionWrapper from '../components/leads/LeadSectionWrapper';
import LeadJobSection from '../components/leads/LeadJobSection';
import LeadContactSection from '../components/leads/LeadContactSection';
import LeadPropertySection from '../components/leads/LeadPropertySection';
import gsap from 'gsap';
// ---------------------------------------------------------------------------
@@ -91,12 +92,13 @@ const INITIAL_FORM = {
lastName: '',
phones: [{ id: '1', number: '', type: 'Mobile', isPrimary: true }],
emails: [],
// Property (Phase 4)
// Property
address: '',
city: '',
state: 'TX',
zip: '',
propertyType: '',
propertyPhotos: [],
// Insurance (Phase 5)
insuranceCompany: '',
claimNumber: '',
@@ -138,7 +140,7 @@ export default function CreateLeadPage() {
formData.lastName &&
formData.phones.some(p => p.number.replace(/\D/g, '').length >= 10)
),
property: false, // Phase 4
property: !!(formData.address && formData.city),
job: isQuickCapture
? !!formData.leadSource
: !!(formData.leadSource && formData.leadType && formData.workType),
@@ -193,6 +195,15 @@ export default function CreateLeadPage() {
/>
);
}
if (section.id === 'property') {
return (
<LeadPropertySection
formData={formData}
updateField={updateField}
isQuickCapture={isQuickCapture}
/>
);
}
if (section.id === 'job') {
return (
<LeadJobSection