================================================================================ INSURANCE QUOTATION FLOW DOCUMENTATION ================================================================================ PROJECT: Multi-Step Insurance Quotation System BASE URL: /insurance ROUTING STRATEGY: Single base path with URL parameters for subcategories ================================================================================ SYSTEM OVERVIEW ================================================================================ This is a progressive disclosure insurance quotation system with: - 3-step wizard flow - Dynamic form fields based on user selections - Two main customer categories: Business & Organizations | Individuals & Families - Multiple insurance types per category - Contextual data collection based on insurance type ================================================================================ FLOW ARCHITECTURE ================================================================================ Step 1: Insurance Category Selection Step 2: Insurance Type Selection Step 3: Coverage Details & Personal Information URL Structure: /insurance (Step 1) /insurance?category=business (Step 2 - Business flow) /insurance?category=individual (Step 2 - Individual flow) /insurance?category=X&type=Y (Step 3 - Detailed forms) ================================================================================ STEP 1: INITIAL SELECTION ================================================================================ URL: /insurance Progress: [1/3] ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ┌────────────────────────────────────────────────────────────────────┐ │ │ │ What type of insurance are you looking for? │ │ │ │ ① Insurance Category │ │ │ │ ┌─────────────────────────┐ ┌─────────────────────────┐ │ │ │ 💼 Business & │ │ 👥 Individuals & │ │ │ │ Organizations │ │ Families │ │ │ │ [SELECTED] │ │ │ │ │ └─────────────────────────┘ └─────────────────────────┘ │ │ │ │ ② Select Insurance │ │ │ │ ┌────────────────┐ ┌────────────────┐ ┌────────────────┐ │ │ │ 🏥 Medical │ │ 💰 Life │ │ 📊 Pension │ │ │ │ Insurance │ │ Insurance │ │ Plan │ │ │ └────────────────┘ └────────────────┘ └────────────────┘ │ │ │ │ ┌────────────────┐ ┌────────────────┐ ┌────────────────┐ │ │ │ 🏢 Property │ │ 🚗 Motor │ │ ⚓ Marine │ │ │ │ Insurance │ │ Insurance │ │ Insurance │ │ │ └────────────────┘ └────────────────┘ └────────────────┘ │ │ │ │ ┌────────────────┐ ┌────────────────┐ │ │ │ ⚖️ Liability │ │ 🔧 Engineering │ │ │ │ Insurance │ │ Insurance │ │ │ └────────────────┘ └────────────────┘ │ │ │ └────────────────────────────────────────────────────────────────┘ COMPONENTS: - Radio button group for category selection (Business/Individual) - Grid layout for insurance type cards (8 types total) - Visual icons for each insurance type - Disabled state for non-selected category options ================================================================================ STEP 2: CATEGORY-SPECIFIC SELECTION ================================================================================ SCENARIO A: BUSINESS & ORGANIZATIONS SELECTED ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ URL: /insurance?category=business Progress: [2/3] ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ┌────────────────────────────────────────────────────────────────────┐ │ │ │ ① Insurance Category │ │ │ │ [💼 Business & Organizations ✓] [👥 Individuals & Families] │ │ │ │ ② Select Insurance │ │ │ │ ┌────────────────┐ ┌────────────────┐ ┌────────────────┐ │ │ │ 🏥 Medical ✅ │ │ 💰 Life │ │ 📊 Pension │ │ │ └────────────────┘ └────────────────┘ └────────────────┘ │ │ │ │ ┌────────────────┐ ┌────────────────┐ ┌────────────────┐ │ │ │ 🏢 Property ✅ │ │ 🚗 Motor ✅ │ │ ⚓ Marine │ │ │ └────────────────┘ └────────────────┘ └────────────────┘ │ │ │ │ ┌────────────────┐ ┌────────────────┐ │ │ │ ⚖️ Liability │ │ 🔧 Engineering │ │ │ └────────────────┘ └────────────────┘ │ │ │ └────────────────────────────────────────────────────────────────┘ AVAILABLE OPTIONS (Business Category): ✅ Medical Insurance ✅ Property Insurance ✅ Motor Insurance (Green checkmarks indicate available/recommended options) ================================================================================ STEP 3: DETAILED FORMS BY TYPE ================================================================================ 3.1 CORPORATE PATH ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ URL: /insurance?category=business&type=medical Progress: [3/3] ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ┌────────────────────────────────────────────────────────────────────┐ │ Tell us more about coverage & yourself │ │ ━━━━━━━━━━ ───────── ───────── │ │ │ │ ① Yearly Coverage 💰 │ │ │ │ ┌────────────┐ ┌────────────┐ ┌────────────┐ │ │ │ Standard │ │ Advanced │ │ Elite │ │ │ │ 50K - 150K │ │ 200K - 300K│ │ 500K - 1M │ │ │ └────────────┘ └────────────┘ └────────────┘ │ │ │ │ ② Personal Information │ │ │ │ Full Name: │ │ ┌─────────────────────────────────────────────┐ │ │ │ Salah Khaled │ │ │ └─────────────────────────────────────────────┘ │ │ │ │ Phone Number: │ │ 🇦🇪 +20 ┌──────────────────────────────────┐ │ │ │ 1123 456 789 │ │ │ └──────────────────────────────────┘ │ │ │ │ Birthday: Gender: │ │ ┌──────────┐ ┌──────────┐ │ │ │ 18/07/94 │ │ Male ▼ │ │ │ └──────────┘ └──────────┘ │ │ │ │ [Back] [Next →] │ │ │ └────────────────────────────────────────────────────────────────┘ 3.2 COMPANY INFORMATION PATH (Business + Property) ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ URL: /insurance?category=business&type=property Progress: [3/3] ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ┌────────────────────────────────────────────────────────────────────┐ │ Who else would you like to cover under your plan? │ │ ━━━━━━━━━━ ━━━━━━━━━━ ───────── │ │ │ │ ① Company Information │ │ │ │ Company Name: │ │ ┌─────────────────────────────────────────────┐ │ │ │ Enter name │ │ │ └─────────────────────────────────────────────┘ │ │ │ │ Company Nature of Business: │ │ ┌─────────────────────────────────────────────┐ │ │ │ Define activities │ │ │ └─────────────────────────────────────────────┘ │ │ │ │ ② Employees Information │ │ │ │ Members: │ │ ┌──────────────────────────────┐ ┌──────────────────────────┐ │ │ │ Employees only │ │ Employees & Families │ │ │ └──────────────────────────────┘ └──────────────────────────┘ │ │ │ │ Employees Number: │ │ ┌─────────────────────────────────────────────┐ │ │ │ 0 ▲ │ │ │ └─────────────────────────────────────────────┘ │ │ │ │ ③ Employees Ages │ │ │ │ Employees Ages: │ │ ┌──────────────────────────────┐ ┌──────────────────────────┐ │ │ │ Average Employees Ages │ │ Detailed Employees Ages │ │ │ └──────────────────────────────┘ └──────────────────────────┘ │ │ │ │ Upload File: │ │ ┌─────────────────────────────────────────────┐ │ │ │ 📎 Drag & drop file │ │ │ │ or click to browse │ │ │ └─────────────────────────────────────────────┘ │ │ │ │ [Table Example: Download template for data entry] │ │ │ │ [Back] [Next →] │ │ │ └────────────────────────────────────────────────────────────────┘ 3.3 HOME INFORMATION PATH (Individual + Home/Tenant) ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ URL: /insurance?category=individual&type=home Progress: [3/3] ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ┌────────────────────────────────────────────────────────────────────┐ │ Who else would you like to cover under your plan? │ │ ━━━━━━━━━━ ━━━━━━━━━━ ───────── │ │ │ │ ① Home Information │ │ │ │ Condition: │ │ ┌──────────────────────────────┐ ┌──────────────────────────┐ │ │ │ Owned │ │ Tenant │ │ │ └──────────────────────────────┘ └──────────────────────────┘ │ │ │ │ [Back] [Next →] │ │ │ └────────────────────────────────────────────────────────────────────┘ 3.4 MOTOR INFORMATION PATH (Business + Motor) ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ URL: /insurance?category=business&type=motor Progress: [3/3] ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ┌────────────────────────────────────────────────────────────────────┐ │ Who else would you like to cover under your plan? │ │ ━━━━━━━━━━ ━━━━━━━━━━ ───────── │ │ │ │ ① Motor Information │ │ │ │ Brand: │ │ ┌─────────────────────────────────────────────┐ │ │ │ Select Brand ▼ │ │ │ └─────────────────────────────────────────────┘ │ │ │ │ Model: │ │ ┌─────────────────────────────────────────────┐ │ │ │ Select Model ▼ │ │ │ └─────────────────────────────────────────────┘ │ │ │ │ Manufacturing Year: │ │ ┌─────────────────────────────────────────────┐ │ │ │ Select Year ▼ │ │ │ └─────────────────────────────────────────────┘ │ │ │ │ ② Specifications │ │ │ │ Condition: │ │ ┌──────────────────────────────┐ ┌──────────────────────────┐ │ │ │ New │ │ Used │ │ │ └──────────────────────────────┘ └──────────────────────────┘ │ │ │ │ Engine Type: │ │ ┌────────────┐ ┌────────────┐ ┌────────────┐ │ │ │ Petrol │ │ Natural Gas│ │ Electric │ │ │ │ Engine │ │ Engine │ │ Engine │ │ │ └────────────┘ └────────────┘ └────────────┘ │ │ │ │ Market Value: │ │ ┌─────────────────────────────────────────────┐ │ │ │ 0 ▲ │ │ │ └─────────────────────────────────────────────┘ │ │ │ │ [Back] [Next →] │ │ │ └────────────────────────────────────────────────────────────────────┐ 3.5 FAMILY MEMBERS PATH (Individual + Family) ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ URL: /insurance?category=individual&type=family Progress: [3/3] ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ┌────────────────────────────────────────────────────────────────────┐ │ Who else would you like to cover under your plan? │ │ ━━━━━━━━━━ ━━━━━━━━━━ ───────── │ │ │ │ Family Members │ │ Present any individuals and secure your family's well-being │ │ effortlessly. Adding a family member to your insurance plan is │ │ a seamless process with us. Every comprehensive protection │ │ tailored to your family's unique needs. │ │ │ │ ┌─────────────────────────────────────────────────────────────┐ │ │ │ Relation Birthday Gender │ │ │ ├─────────────────────────────────────────────────────────────┤ │ │ │ Daughter ▼ 18/07/1994 📅 Male ▼ 🗑️ │ │ │ ├─────────────────────────────────────────────────────────────┤ │ │ │ [Select] ▼ [Select date] 📅 [Select] ▼ 🗑️ │ │ │ └─────────────────────────────────────────────────────────────┘ │ │ │ │ [+ Add Member] │ │ │ │ [Back] [Next →] │ │ │ └────────────────────────────────────────────────────────────────────┘ ================================================================================ COMPONENT SPECIFICATIONS ================================================================================ SHARED COMPONENTS: ───────────────── 1. Progress Indicator - 3-step visual progress bar - Current step highlighted in blue - Format: Step X / 3 2. Navigation Buttons - Back: Returns to previous step - Next: Validates and proceeds to next step - Start Over: Returns to step 1 (visible on step 3) 3. Form Validation - Required field indicators - Real-time validation - Error messages below fields FORM FIELD TYPES: ──────────────── 1. Radio Groups (Single selection) - Category selection - Coverage type selection - Condition selection 2. Checkbox Groups (Multiple selection) - Insurance type cards 3. Text Inputs - Name fields - Company information - Phone numbers (with country code selector) 4. Dropdown Selects - Gender - Brand/Model/Year - Family relationships 5. Number Inputs - Employee count - Market value - Age inputs 6. Date Pickers - Birthday selection - Manufacturing year 7. File Upload - Drag & drop interface - Template download option 8. Dynamic Table - Add/remove rows - Inline editing - Delete functionality per row ================================================================================ STATE MANAGEMENT ================================================================================ APPLICATION STATE: ───────────────── { currentStep: 1-3, category: 'business' | 'individual', insuranceType: 'medical' | 'property' | 'motor' | 'life' | 'pension' | 'marine' | 'liability' | 'engineering', formData: { // Step 1 category: string, insuranceTypes: array, // Step 2 - Coverage coverageType: 'standard' | 'advanced' | 'elite', yearlyAmount: number, // Step 3 - Personal/Company personalInfo: { fullName: string, phone: string, birthday: date, gender: string }, companyInfo: { name: string, natureOfBusiness: string, employeeCount: number, membersCoverage: 'employees' | 'employeesAndFamilies', agesType: 'average' | 'detailed', uploadedFile: file }, motorInfo: { brand: string, model: string, year: number, condition: 'new' | 'used', engineType: 'petrol' | 'naturalGas' | 'electric', marketValue: number }, homeInfo: { condition: 'owned' | 'tenant' }, familyMembers: [ { relation: string, birthday: date, gender: string } ] } } ================================================================================ ROUTING LOGIC ================================================================================ NAVIGATION FLOW: ─────────────── Step 1 → Step 2: - User selects category (Business/Individual) - URL updates to /insurance?category={selection} - Available insurance types filter based on category Step 2 → Step 3: - User selects insurance type(s) - URL updates to /insurance?category={category}&type={type} - Form fields dynamically load based on combination Step 3 → Submission: - Form validation occurs - Data submitted to backend - Redirect to confirmation or quote page CONDITIONAL FORM RENDERING: ───────────────────────── Business + Medical → Corporate coverage form Business + Property → Company information form Business + Motor → Motor + specifications form Individual + Home → Home ownership form Individual + Family → Family members form ================================================================================ API ENDPOINTS ================================================================================ GET /api/insurance/categories - Returns available categories and insurance types GET /api/insurance/form-fields?category={cat}&type={type} - Returns dynamic form configuration POST /api/insurance/quote - Submits form data - Returns quote ID and preliminary pricing GET /api/insurance/brands - Returns vehicle brands for motor insurance GET /api/insurance/models?brand={brand} - Returns models for selected brand POST /api/insurance/validate - Real-time field validation ================================================================================ RESPONSIVE DESIGN ================================================================================ BREAKPOINTS: ─────────── - Mobile: < 768px (Single column, stacked cards) - Tablet: 768px - 1024px (2-column grid) - Desktop: > 1024px (3-column grid for cards) MOBILE OPTIMIZATIONS: ──────────────────── - Touch-friendly targets (min 44x44px) - Simplified navigation - Collapsible sections in forms - Native date/number inputs - Optimized file upload for camera/gallery ================================================================================ ACCESSIBILITY ================================================================================ WCAG 2.1 AA COMPLIANCE: ────────────────────── - Keyboard navigation support - ARIA labels for all interactive elements - Focus indicators - Screen reader announcements for state changes - Color contrast ratio > 4.5:1 - Error messages associated with fields - Skip navigation links ================================================================================ ERROR HANDLING ================================================================================ VALIDATION RULES: ──────────────── - Required fields marked with asterisk (*) - Email format validation - Phone number format per country - Age restrictions (18+ for primary applicant) - File size limits (max 10MB) - Supported file formats (.pdf, .doc, .xlsx) ERROR MESSAGES: ────────────── - Inline validation messages - Summary of errors at top of form - Clear instructions for resolution - Prevent navigation with incomplete required fields ================================================================================ IMPLEMENTATION NOTES ================================================================================ TECHNICAL CONSIDERATIONS: ──────────────────────── 1. Use React Router for navigation with query parameters 2. Implement Redux/Context API for state management 3. Form library: React Hook Form or Formik 4. Validation: Yup or Zod schema validation 5. API calls: Axios with interceptors 6. Loading states between steps 7. Auto-save draft functionality 8. Session storage for form persistence 9. Analytics tracking for drop-off points 10. A/B testing framework for conversion optimization PERFORMANCE OPTIMIZATIONS: ───────────────────────── 1. Code splitting by route 2. Lazy loading for form components 3. Debounced API calls for validation 4. Optimistic UI updates 5. Prefetch next step components 6. CDN for static assets 7. Gzip compression 8. Browser caching strategies SECURITY MEASURES: ───────────────── 1. HTTPS only 2. CSRF token implementation 3. Input sanitization 4. Rate limiting on API endpoints 5. Secure file upload with virus scanning 6. PII encryption in transit and at rest 7. Session timeout after inactivity 8. Audit logging for all submissions ================================================================================ FUTURE ENHANCEMENTS ================================================================================ PLANNED FEATURES: ──────────────── 1. Save and resume later functionality 2. Multi-language support (Arabic, English) 3. Comparison tool for multiple quotes 4. Integration with government databases 5. AI-powered recommendation engine 6. Chat support integration 7. Document OCR for automatic form filling 8. Mobile app with biometric authentication 9. Real-time pricing calculator 10. Social media login options ================================================================================ END OF DOCUMENTATION ================================================================================