trent_larson/crowd-funder-for-time-pwa
4
1
Fork 2
Code Issues Pull Requests 22 Releases 5 Wiki Activity

docs: Enhance GiftedDialog refactoring plan with template improvements and complexity analysis

Browse Source 
- Add comprehensive template improvement strategy for Pinia refactoring
- Integrate component decomposition into existing phase structure
- Update timeline estimates with complexity-adjusted projections (30-33 days realistic)
- Add detailed complexity measurement framework and risk assessment
- Expand Phase 4 to include accessibility and performance optimization
- Document proposed quick fixes for critical usability issues
- Add executive summary and overview sections for better navigation
- Include component composition strategy and accessibility patterns
- Update action items with enhanced template foundation requirements

This comprehensive update transforms the refactoring plan from a basic store
migration to a complete modernization including template decomposition,
accessibility compliance, and performance optimization while maintaining
backward compatibility.
This commit is contained in:
Matthew Raymer
2025-06-28 09:05:28 +00:00
parent a16f88743a
commit fcac13eb7e
1 changed files with 437 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

466
GiftedDialog-Logic-Flow.md
View File

@@ -4,6 +4,175 @@
**Date:** December 2025 **Date:** December 2025
**Component:** `src/components/GiftedDialog.vue` **Component:** `src/components/GiftedDialog.vue`
## Executive Summary
The `GiftedDialog` component is a critical interface in the Time Safari application that enables users to record gifts and contributions between people and projects. This document provides comprehensive analysis of the component's current implementation and a detailed refactoring plan to modernize its architecture using Pinia store management and enhanced template composition.
### Current State
- **Complexity**: 400+ line monolithic Vue component with mixed UI and business logic
- **State Management**: Local component state with complex prop-based configuration
- **Template**: Single large template with repetitive patterns and accessibility gaps
- **Integration**: Used across 8+ views with varying configuration requirements
- **Critical Issues**: Navigation flow problems, dual-purpose confusion, parameter redundancy
### Proposed Solution
- **Pinia Store Integration**: Centralized state management with improved type safety
- **Template Decomposition**: Break into focused, reusable sub-components
- **Accessibility Enhancement**: Comprehensive ARIA labels, keyboard navigation, screen reader support
- **User Experience**: Visual progress indicators, better error feedback, streamlined workflows
- **Developer Experience**: Improved debugging, testing, and maintainability
### Business Impact
- **User Experience**: Eliminates navigation dead-ends and confusion, adds visual progress guidance
- **Maintainability**: Reduces component complexity from 400+ to ~100 lines, improves testability
- **Accessibility**: Meets WCAG guidelines for inclusive user experience
- **Development Velocity**: Easier debugging, testing, and feature additions
- **Risk Mitigation**: Backward compatibility preserved during transition
### Implementation Timeline
- **Aggressive**: 25 days (5 weeks) - High risk, may require scope reduction
- **Realistic**: 30-33 days (6-7 weeks) - Recommended approach with 70-80% confidence
- **Conservative**: 35-40 days (7-8 weeks) - High confidence with full complexity buffer
- **Approach**: Incremental migration with feature flags for rollback safety
- **Testing**: Comprehensive test coverage including accessibility and performance validation
- **Deliverables**: Modern, accessible, maintainable component with enhanced user experience
---
## Summary
### Component Overview
The `GiftedDialog` component serves as the primary interface for recording gifts and contributions in the Time Safari application. It handles complex multi-step workflows for various gift scenarios:
- **Person-to-Person**: Direct gifts between individuals
- **Person-to-Project**: Contributions to community projects
- **Project-to-Person**: Recognition of benefits received from projects
### Key Features
#### Current Capabilities
- **Multi-Step Workflow**: Entity selection → Gift details → Submission
- **Entity Type Detection**: Automatic determination of giver/recipient types based on context
- **Conflict Prevention**: Prevents selecting same person as both giver and recipient
- **Cross-Platform Integration**: Used across HomeView, ProjectView, ContactsView, and 5+ other views
- **Validation System**: Comprehensive input validation with user-friendly error messages
- **Advanced Options**: Integration with GiftedDetailsView for photos and extended descriptions
#### Proposed Enhancements
- **Visual Progress**: Step indicators showing "Step 1 of 2" with progress visualization
- **Component Composition**: Decomposed into 7 focused sub-components for better maintainability
- **Accessibility**: Full WCAG compliance with keyboard navigation and screen reader support
- **Performance**: Optimized bundle size and rendering performance
- **Type Safety**: Enhanced TypeScript definitions throughout component hierarchy
### Technical Architecture
#### Current Implementation
```typescript
// Monolithic component with local state
export default class GiftedDialog extends Vue {
visible = false;
currentStep = 1;
stepType = "giver"; // Entity selection mode
giver?: GiverReceiverInputInfo;
receiver?: GiverReceiverInputInfo;
// ... 20+ more state variables
}
```
#### Proposed Architecture
```typescript
// Store-based state management
const giftDialogStore = useGiftDialogStore();
// Component composition
<template>
<GiftDialogStepIndicator />
<GiftDialogEntitySelection v-if="step1" />
<GiftDialogDetailsForm v-if="step2" />
</template>
```
### Integration Points
The component integrates with multiple views across the application:
| View | Usage Pattern | Configuration |
|------|---------------|---------------|
| **HomeView** | Main entry point | Gift prompts, unnamed giver support |
| **ProjectViewView** | Dual dialogs | Bidirectional gift recording |
| **ContactsView** | Contact-specific | Direction confirmation flows |
| **ContactGiftingView** | Advanced UI | Complex entity type handling |
| **ClaimView** | Offer fulfillment | Pre-populated offer context |
### Critical Issues Addressed
#### 1. Navigation Flow Problems
- **Issue**: Users getting stuck in ContactGiftingView with no completion path
- **Solution**: Proper success callbacks and navigation logic
#### 2. Component Dual-Purpose Confusion
- **Issue**: Users unclear about current step and progress
- **Solution**: Visual step indicators and clearer labeling
#### 3. Parameter Redundancy
- **Issue**: Legacy `projectId` conflicts with context-aware parameters
- **Solution**: Streamlined parameter handling and cleanup
### Refactoring Plan Overview
#### Phase Structure (30-33 days realistic)
1. **Pre-Phase 1** (3 days): Address critical missing fields and dependencies
2. **Phase 1** (4-5 days): Store infrastructure + foundation components
3. **Phase 2** (5-6 days): Hybrid component + main template components
4. **Phase 3** (5-6 days): Incremental view migration
5. **Phase 4** (5-6 days): Template enhancement and accessibility
6. **Phase 5** (3 days): Store enhancement and advanced features
7. **Phase 6** (4 days): Cleanup, testing, and finalization
#### Complexity Analysis
- **Overall Complexity Score**: 3.7/5 (High)
- **Highest Risk Phase**: Phase 2 (5/5) - Backward compatibility challenges
- **Key Complexity Factors**: 8+ integration points, 400+ line template decomposition, WCAG compliance
- **Estimation Model**: Base effort × 1.4 complexity multiplier + 25% risk buffer
#### Risk Mitigation
- **Backward Compatibility**: Feature flags enable rollback at any phase
- **Incremental Migration**: Views migrated one at a time with full testing
- **Comprehensive Testing**: Existing Playwright tests maintained throughout
- **Performance Monitoring**: Bundle size and runtime performance tracked
#### Success Metrics
- **Technical**: All existing tests pass, no performance regression >10%
- **User Experience**: No change in functionality, improved error rates
- **Code Quality**: Reduced complexity, improved testability, better separation of concerns
- **Accessibility**: WCAG compliance, improved screen reader support
### Expected Outcomes
#### For Users
- **Clearer Navigation**: Visual progress indicators and better step guidance
- **Reduced Confusion**: Eliminated dual-purpose ambiguity and dead-end flows
- **Better Accessibility**: Full keyboard navigation and screen reader support
- **Improved Reliability**: Better error handling and recovery mechanisms
#### For Developers
- **Easier Maintenance**: Component complexity reduced from 400+ to ~100 lines
- **Better Testing**: Isolated components enable focused unit testing
- **Improved Debugging**: Clear separation of concerns and better error messages
- **Enhanced Type Safety**: Comprehensive TypeScript definitions throughout
#### For Business
- **Reduced Support**: Fewer user confusion and navigation issues
- **Faster Development**: Easier to add features and fix issues
- **Better Accessibility**: Compliance with accessibility standards
- **Future-Proof Architecture**: Modern patterns enable easier future enhancements
This refactoring represents a comprehensive modernization that maintains full backward compatibility while significantly improving user experience, developer productivity, and code maintainability.
---
## Overview ## Overview
The `GiftedDialog` component is a multi-step modal dialog that facilitates recording gifts/contributions between people and projects in the Time Safari application. It supports various gift scenarios including person-to-person, person-to-project, and project-to-person transactions. The `GiftedDialog` component is a multi-step modal dialog that facilitates recording gifts/contributions between people and projects in the Time Safari application. It supports various gift scenarios including person-to-person, person-to-project, and project-to-person transactions.
@@ -1847,19 +2016,33 @@ This inventory serves as a comprehensive checklist to ensure no functionality is
- [ ] ✅ Data loading actions implemented and tested in store - [ ] ✅ Data loading actions implemented and tested in store
- [ ] ✅ Utility reference imports validated - [ ] ✅ Utility reference imports validated
#### ⚠️ **HIGH PRIORITY (Phase 1)** #### ⚠️ **HIGH PRIORITY (Phase 1 - Enhanced with Template Foundations)**
- [ ] Implement complete store with all identified fields - [ ] Implement complete store with all identified fields
- [ ] Create comprehensive test coverage for missing functionality - [ ] Create comprehensive test coverage for missing functionality
- [ ] Validate callback function handling - [ ] Validate callback function handling
- [ ] Test offer ID integration - [ ] Test offer ID integration
- [ ] **NEW**: Create foundation template components (`GiftDialogStepIndicator`, `EntityGridItem`, `EntitySummaryCard`, `ValidationErrorList`)
- [ ] **NEW**: Establish component design system and accessibility patterns
- [ ] **NEW**: Implement TypeScript interfaces for component props and events
#### ✅ **MEDIUM PRIORITY (Phase 2-3)** #### ✅ **MEDIUM PRIORITY (Phase 2-3 - Enhanced with Template Integration)**
- [ ] Implement hybrid component with ALL computed properties - [ ] Implement hybrid component with ALL computed properties
- [ ] Migrate views with full integration testing - [ ] Migrate views with full integration testing
- [ ] Validate query parameter generation - [ ] Validate query parameter generation
- [ ] **NEW**: Create main template components (`GiftDialogEntitySelection`, `GiftDialogDetailsForm`)
- [ ] **NEW**: Integrate step indicators and progress visualization
- [ ] **NEW**: Implement accessibility enhancements (ARIA labels, keyboard navigation)
- [ ] **NEW**: Add loading and error state components
#### 🎨 **TEMPLATE ENHANCEMENT PRIORITY (Phase 4-5)**
- [ ] **NEW**: Complete template decomposition and component integration
- [ ] **NEW**: Implement visual progress indicators and animations
- [ ] **NEW**: Optimize component performance and bundle size
- [ ] **NEW**: Add comprehensive accessibility testing
- [ ] **NEW**: Create component documentation and examples
**REFACTORING READINESS:** ⏳ **PRE-PHASE 1 IN PROGRESS** - Critical fields being addressed **REFACTORING READINESS:** ⏳ **PRE-PHASE 1 IN PROGRESS** - Critical fields being addressed
**ESTIMATED COMPLETION:** 17 days total (3 days pre-phase + 14 days original plan) **ESTIMATED COMPLETION:** 21 days total (3 days pre-phase + 18 days enhanced plan with template improvements)
--- ---
@@ -2318,20 +2501,134 @@ testCriticalFunctionality().catch(console.error);
- [ ] Store can be instantiated without errors - [ ] Store can be instantiated without errors
- [ ] Integration tests pass - [ ] Integration tests pass
### Updated Timeline ### Updated Timeline and Complexity Analysis
#### **Original Timeline:** 5 phases, ~2 weeks #### **Complexity Measurement Framework**
#### **Updated Timeline:** Pre-Phase + 5 phases, ~3 weeks
| Phase | Duration | Status | Dependencies | Understanding complexity is crucial for accurate estimation. We measure complexity across multiple dimensions:
|-------|----------|--------|--------------|
| **Pre-Phase 1** | **3 days** | ⏳ **In Progress** | None | ##### **1. Technical Complexity Factors**
| Phase 1 | 2 days | ⏸️ Waiting | Pre-Phase 1 complete | - **State Dependencies**: Number of interconnected state variables (GiftedDialog has 25+ state fields)
| Phase 2 | 3 days | ⏸️ Waiting | Phase 1 complete | - **Integration Points**: Number of views using the component (8+ integration points identified)
| Phase 3 | 5 days | ⏸️ Waiting | Phase 2 complete | - **Backward Compatibility**: Requirement to maintain exact existing behavior during transition
| Phase 4 | 2 days | ⏸️ Waiting | Phase 3 complete | - **Cross-Platform Requirements**: Web, mobile (Capacitor), and desktop (Electron) support
| Phase 5 | 2 days | ⏸️ Waiting | Phase 4 complete | - **Type Safety**: Comprehensive TypeScript integration across component hierarchy
| **Total** | **17 days** | | |
##### **2. Complexity Scoring System**
```typescript
interface ComplexityMetrics {
technical: 1-5; // Code complexity, architecture changes
integration: 1-5; // Number of integration points and dependencies
testing: 1-5; // Test coverage requirements and validation
accessibility: 1-5; // WCAG compliance and inclusive design
performance: 1-5; // Bundle size, rendering optimization
}
// GiftedDialog Refactoring Complexity Score
const complexityScore = {
technical: 4, // High - 400+ line component, store migration
integration: 5, // Very High - 8+ views, complex prop patterns
testing: 4, // High - Playwright tests, accessibility testing
accessibility: 4, // High - WCAG compliance, keyboard navigation
performance: 3 // Medium - Bundle optimization, reactive updates
};
// Overall Complexity: 4.0/5 (High)
```
##### **3. Complexity Indicators by Phase**
- **Pre-Phase 1**: Low complexity (import validation, interface completion)
- **Phase 1**: Medium-High (store creation + 4 foundation components)
- **Phase 2**: High (backward compatibility + template decomposition)
- **Phase 3**: Medium (incremental migration, known patterns)
- **Phase 4**: High (accessibility compliance, performance optimization)
- **Phase 5**: Medium (store enhancements, well-defined scope)
- **Phase 6**: Medium-High (comprehensive testing, documentation)
##### **4. Risk-Adjusted Estimation Model**
```typescript
interface EstimationFactors {
baseEffort: number; // Initial estimate
complexityMultiplier: number; // 1.0-2.0 based on complexity score
riskBuffer: number; // 10-40% contingency
integrationOverhead: number; // Additional time for coordination
}
const estimationModel = {
baseEffort: 20, // 20 days for core functionality
complexityMultiplier: 1.4, // 40% increase for high complexity
riskBuffer: 0.25, // 25% contingency buffer
integrationOverhead: 3 // 3 days for integration complexity
};
// Calculation: (20 × 1.4 + 3) × 1.25 = 35 days realistic estimate
```
#### **Timeline Comparison and Analysis**
##### **Original Estimates vs. Complexity-Adjusted**
| Phase | Original | Complexity Analysis | Revised | Confidence | Risk Factors |
|-------|----------|-------------------|---------|------------|--------------|
| **Pre-Phase 1** | **3 days** | Low complexity, well-scoped | **3 days** | High ✅ | Import path changes |
| Phase 1 | 3 days | Med-High: Store + 4 components | **4-5 days** | Medium ⚠️ | Component design complexity |
| Phase 2 | 4 days | High: Backward compatibility | **5-6 days** | Medium ⚠️ | Integration edge cases |
| Phase 3 | 5 days | Medium: Known migration patterns | **5-6 days** | Medium ✅ | View-specific quirks |
| Phase 4 | 4 days | High: Accessibility + performance | **5-6 days** | Medium ⚠️ | WCAG compliance depth |
| Phase 5 | 3 days | Medium: Well-defined enhancements | **3 days** | High ✅ | Store pattern maturity |
| Phase 6 | 3 days | Med-High: Comprehensive testing | **4 days** | Medium ⚠️ | Test coverage breadth |
##### **Timeline Options**
**Option A: Aggressive Timeline (Original)**
- **Duration**: 25 days (5 weeks)
- **Risk**: High - 15-20% probability of overrun
- **Conditions**: Dedicated developer, minimal scope creep
- **Trade-offs**: May require reducing accessibility features or advanced optimizations
**Option B: Realistic Timeline (Complexity-Adjusted)**
- **Duration**: 30-33 days (6-7 weeks)
- **Risk**: Medium - 70-80% probability of completion within timeline
- **Buffer**: 20-30% contingency for complexity factors
- **Recommended**: ✅ **This is the recommended approach**
**Option C: Conservative Timeline (High-Confidence)**
- **Duration**: 35-40 days (7-8 weeks)
- **Risk**: Low - 90%+ probability of completion
- **Buffer**: 40-60% contingency for unknown complexity
- **Use Case**: When delivery certainty is critical
#### **Detailed Phase Analysis**
| Phase | Duration | Status | Dependencies | Focus | Complexity Score |
|-------|----------|--------|--------------|-------|-----------------|
| **Pre-Phase 1** | **3 days** | ⏳ **In Progress** | None | Critical missing fields | 2/5 (Low) |
| Phase 1 | **4-5 days** | ⏸️ Waiting | Pre-Phase 1 complete | Store + Foundation Components | 4/5 (High) |
| Phase 2 | **5-6 days** | ⏸️ Waiting | Phase 1 complete | Hybrid Component + Main Templates | 5/5 (Very High) |
| Phase 3 | **5-6 days** | ⏸️ Waiting | Phase 2 complete | View Migration | 3/5 (Medium) |
| Phase 4 | **5-6 days** | ⏸️ Waiting | Phase 3 complete | Template Enhancement | 4/5 (High) |
| Phase 5 | **3 days** | ⏸️ Waiting | Phase 4 complete | Store Enhancement | 3/5 (Medium) |
| Phase 6 | **4 days** | ⏸️ Waiting | Phase 5 complete | Cleanup & Testing | 4/5 (High) |
| **Realistic Total** | **30-33 days** | | | | **3.7/5 (High)** |
| **Conservative Total** | **35-40 days** | | | | **With full buffer** |
#### **Complexity Justification by Phase**
**Phase 2 (Highest Complexity - 5/5):**
- Maintaining backward compatibility across 8+ integration points
- Dual-mode implementation (legacy + store) with identical behavior
- Template decomposition of 400+ line component
- Event handling synchronization between parent/child components
**Phase 4 (High Complexity - 4/5):**
- WCAG accessibility compliance requires extensive testing
- Performance optimization across multiple platforms
- Animation and transition implementation
- Focus management and keyboard navigation
**Phase 1 & 6 (High Complexity - 4/5):**
- Foundation component design affects entire architecture
- Comprehensive testing and documentation requirements
- TypeScript interface design for extensibility
### Risk Mitigation ### Risk Mitigation
@@ -2406,13 +2703,18 @@ This plan outlines a systematic approach to refactor the GiftedDialog component
**CRITICAL UPDATE**: After comprehensive audit of `GiftedDialog.vue`, additional fields and functionality have been identified that must be included in the refactoring plan to prevent breaking changes. **CRITICAL UPDATE**: After comprehensive audit of `GiftedDialog.vue`, additional fields and functionality have been identified that must be included in the refactoring plan to prevent breaking changes.
### Phase 1: Foundation Setup ### Phase 1: Foundation Setup (Enhanced with Template Foundations)
#### 1.1 Create Store Infrastructure #### 1.1 Create Store Infrastructure + Foundation Components
**Files to create:** **Files to create:**
``` ```
src/stores/giftDialog.ts src/stores/giftDialog.ts
src/types/giftDialog.ts (type definitions) src/types/giftDialog.ts (type definitions)
src/components/GiftDialog/GiftDialogStepIndicator.vue
src/components/GiftDialog/EntityGridItem.vue
src/components/GiftDialog/EntitySummaryCard.vue
src/components/GiftDialog/ValidationErrorList.vue
src/components/GiftDialog/index.ts (component exports)
``` ```
**Tasks:** **Tasks:**
@@ -2424,6 +2726,12 @@ src/types/giftDialog.ts (type definitions)
- [ ] Add API and account management actions - [ ] Add API and account management actions
- [ ] Add simple validation methods - [ ] Add simple validation methods
- [ ] **NEW**: Define improved type definitions for entity selection - [ ] **NEW**: Define improved type definitions for entity selection
- [ ] **NEW**: Create `GiftDialogStepIndicator` component with progress visualization
- [ ] **NEW**: Create `EntityGridItem` component for standardized entity display
- [ ] **NEW**: Create `EntitySummaryCard` component for gift details step
- [ ] **NEW**: Create `ValidationErrorList` component for error feedback
- [ ] **NEW**: Establish component design system and accessibility patterns
- [ ] **NEW**: Implement TypeScript interfaces for all component props and events
**Complete Type Definitions:** **Complete Type Definitions:**
```typescript ```typescript
@@ -2694,15 +3002,19 @@ package.json (if Pinia not already installed)
**Success Criteria:** Store can be imported and used in any component with full type safety and all existing functionality **Success Criteria:** Store can be imported and used in any component with full type safety and all existing functionality
### Phase 2: Component Hybrid Implementation ### Phase 2: Component Hybrid Implementation (Enhanced with Main Template Components)
#### 2.1 Create Backward-Compatible GiftedDialog #### 2.1 Create Backward-Compatible GiftedDialog + Main Template Components
**Files to modify:** **Files to modify/create:**
``` ```
src/components/GiftedDialog.vue src/components/GiftedDialog.vue
src/components/GiftDialog/GiftDialogEntitySelection.vue
src/components/GiftDialog/GiftDialogDetailsForm.vue
src/components/GiftDialog/GiftDialogLoadingState.vue
src/components/GiftDialog/GiftDialogErrorState.vue
``` ```
**Strategy:** Dual-mode implementation that can work with both old and new patterns while preserving ALL existing functionality **Strategy:** Dual-mode implementation that can work with both old and new patterns while preserving ALL existing functionality, enhanced with component composition
**Tasks:** **Tasks:**
- [ ] Add store import and initialization - [ ] Add store import and initialization
@@ -2714,6 +3026,11 @@ src/components/GiftedDialog.vue
- [ ] **NEW**: Rename `stepType` to `entitySelectionMode` in legacy mode - [ ] **NEW**: Rename `stepType` to `entitySelectionMode` in legacy mode
- [ ] **NEW**: Improve method naming consistency - [ ] **NEW**: Improve method naming consistency
- [ ] **NEW**: Add type safety enhancements - [ ] **NEW**: Add type safety enhancements
- [ ] **NEW**: Create `GiftDialogEntitySelection` component for entity selection logic
- [ ] **NEW**: Create `GiftDialogDetailsForm` component for gift details step
- [ ] **NEW**: Create loading and error state components
- [ ] **NEW**: Integrate step indicators and progress visualization
- [ ] **NEW**: Implement accessibility enhancements (ARIA labels, keyboard navigation)
**Complete Implementation with ALL Fields:** **Complete Implementation with ALL Fields:**
```typescript ```typescript
@@ -3187,9 +3504,100 @@ src/views/NewActivityView.vue
- [ ] **NEW**: Update all method calls to use improved naming - [ ] **NEW**: Update all method calls to use improved naming
- [ ] **NEW**: Implement consistent error handling patterns - [ ] **NEW**: Implement consistent error handling patterns
### Phase 4: Store Enhancement ### Phase 4: Template Enhancement and Component Integration
#### 4.1 Advanced Store Features #### 4.1 Complete Template Decomposition
**Files to create/modify:**
```
src/components/GiftedDialog.vue (major template refactor)
src/components/GiftDialog/GiftDialogStepIndicator.vue (enhance)
src/components/GiftDialog/EntityGridItem.vue (enhance)
src/components/GiftDialog/GiftDialogEntitySelection.vue (enhance)
src/components/GiftDialog/GiftDialogDetailsForm.vue (enhance)
```
**Tasks:**
- [ ] **NEW**: Refactor main GiftedDialog template to use component composition
- [ ] **NEW**: Implement visual progress indicators and step transitions
- [ ] **NEW**: Add comprehensive accessibility features (ARIA labels, keyboard navigation, focus management)
- [ ] **NEW**: Create responsive design patterns for all screen sizes
- [ ] **NEW**: Implement loading states and error feedback throughout
- [ ] **NEW**: Add animations and transitions for better UX
- [ ] **NEW**: Optimize component performance and bundle size
**Enhanced Template Structure:**
```vue
<!-- Enhanced GiftedDialog.vue -->
<template>
<div v-if="isVisible" class="dialog-overlay" @click.self="closeDialog">
<div class="dialog" role="dialog" aria-labelledby="dialog-title" aria-modal="true">
<!-- Step Progress Indicator -->
<GiftDialogStepIndicator
:current-step="currentStep"
:total-steps="2"
:step-labels="['Select Entities', 'Gift Details']"
/>
<!-- Step 1: Entity Selection -->
<GiftDialogEntitySelection
v-if="currentStep === 'entity-selection'"
:entity-selection-mode="entitySelectionMode"
:giver-entity-type="giverEntityType"
:recipient-entity-type="recipientEntityType"
:should-show-projects="shouldShowProjects"
:all-contacts="allContacts"
:projects="projects"
:active-did="activeDid"
:conflict-checker="wouldCreateConflict"
@select-entity="handleEntitySelection"
@cancel="closeDialog"
/>
<!-- Step 2: Gift Details -->
<GiftDialogDetailsForm
v-else-if="currentStep === 'gift-details'"
:giver="giver"
:receiver="receiver"
:giver-entity-type="giverEntityType"
:recipient-entity-type="recipientEntityType"
:description="description"
:amount-input="amountInput"
:unit-code="unitCode"
:prompt="prompt"
:has-person-conflict="hasPersonConflict"
:validation-errors="validationErrors"
:is-submitting="isSubmitting"
:can-edit-giver="canEditGiver"
:can-edit-recipient="canEditRecipient"
@update-description="updateDescription"
@update-amount="updateAmount"
@update-unit="updateUnit"
@increment="increment"
@decrement="decrement"
@edit-entity="handleEditEntity"
@submit="submitGift"
@cancel="closeDialog"
@open-advanced="openAdvancedDetails"
/>
</div>
</div>
</template>
```
#### 4.2 Accessibility and Performance Optimization
**Tasks:**
- [ ] **NEW**: Implement comprehensive keyboard navigation
- [ ] **NEW**: Add screen reader support with proper ARIA labels
- [ ] **NEW**: Optimize component bundle size and loading performance
- [ ] **NEW**: Add comprehensive error handling and recovery
- [ ] **NEW**: Implement focus management between steps
- [ ] **NEW**: Add animation and transition effects
**Success Criteria:** Template is fully decomposed, accessible, and performant with improved user experience
### Phase 5: Store Enhancement and Advanced Features
#### 5.1 Advanced Store Features
**Files to modify:** **Files to modify:**
``` ```
src/stores/giftDialog.ts src/stores/giftDialog.ts
@@ -3205,7 +3613,7 @@ src/stores/giftDialog.ts
- [ ] **NEW**: Add conflict resolution strategies - [ ] **NEW**: Add conflict resolution strategies
- [ ] **NEW**: Create validation rules engine - [ ] **NEW**: Create validation rules engine
#### 4.2 Performance Optimization #### 5.2 Performance Optimization
**Tasks:** **Tasks:**
- [ ] Optimize reactive updates - [ ] Optimize reactive updates
- [ ] Add selective state subscriptions - [ ] Add selective state subscriptions
@@ -3214,9 +3622,9 @@ src/stores/giftDialog.ts
**Success Criteria:** No performance regressions, ideally improvements **Success Criteria:** No performance regressions, ideally improvements
### Phase 5: Cleanup and Finalization ### Phase 6: Cleanup and Finalization
#### 5.1 Remove Legacy Code #### 6.1 Remove Legacy Code
**Files to modify:** **Files to modify:**
``` ```
src/components/GiftedDialog.vue src/components/GiftedDialog.vue
@@ -3231,7 +3639,7 @@ src/components/GiftedDialog.vue
- [ ] **NEW**: Clean up old variable names completely - [ ] **NEW**: Clean up old variable names completely
- [ ] **NEW**: Finalize improved method signatures - [ ] **NEW**: Finalize improved method signatures
#### 5.2 Template Updates #### 6.2 Final Template Polish
**Files to modify:** **Files to modify:**
``` ```
src/components/GiftedDialog.vue (template section) src/components/GiftedDialog.vue (template section)
@@ -3265,7 +3673,7 @@ src/components/GiftedDialog.vue (template section)
</template> </template>
``` ```
#### 5.3 Add Comprehensive Testing #### 6.3 Add Comprehensive Testing
**Files to create:** **Files to create:**
``` ```
src/stores/__tests__/giftDialog.test.ts src/stores/__tests__/giftDialog.test.ts
@@ -3311,7 +3719,7 @@ describe('GiftDialogStore Entity Selection', () => {
}); });
``` ```
#### 5.4 Documentation Updates #### 6.4 Documentation Updates
**Files to modify:** **Files to modify:**
``` ```
GiftedDialog-Logic-Flow.md GiftedDialog-Logic-Flow.md