crowd-funder-for-time-pwa/docs/migration-testing/CLAIMCERTIFICATEVIEW_MIGRATION.md

ClaimCertificateView.vue Migration Documentation

Migration Start: 2025-07-08 12:24 UTC
Component: ClaimCertificateView.vue
Priority: High (Critical User Journey)
Location: src/views/ClaimCertificateView.vue

Pre-Migration Analysis

🔍 Current State Assessment

Database Operations

• Legacy Pattern: Uses databaseUtil.retrieveSettingsForActiveAccount() (line 36)
• Legacy Pattern: Uses databaseUtil.mapQueryResultToValues() (line 92)
• Direct PlatformService: Uses PlatformServiceFactory.getInstance() (line 88)
• Raw SQL: Uses "SELECT * FROM contacts" (line 89)

Notification Usage

• Direct $notify Calls: 1 instance found (line 75)
• Notification Type: danger
• Message: Error handling for claim loading failure

Template Complexity

• Simple Template: Basic canvas-based certificate display
• Dynamic Content: Canvas drawing with claim data
• User Interactions: Click to navigate to claim details

📊 Migration Complexity Assessment

• Database Migration: Medium (2 database operations)
• SQL Abstraction: Low (1 raw SQL query)
• Notification Migration: Low (1 notification)
• Template Streamlining: Low (simple template)

🎯 Migration Goals

1. Replace databaseUtil calls with PlatformServiceMixin methods
2. Abstract raw SQL with service methods
3. Extract notification message to constants
4. Replace $notify() call with helper method
5. Streamline template if needed

Migration Plan

Phase 1: Database Migration

// Replace databaseUtil.retrieveSettingsForActiveAccount()
const settings = await this.$accountSettings();

// Replace PlatformServiceFactory.getInstance() + raw SQL
const allContacts = await this.$getAllContacts();

// Replace databaseUtil.mapQueryResultToValues()
// This will be handled by the service method above

Phase 2: Notification Migration

// Extract to constants
NOTIFY_CLAIM_CERTIFICATE_LOAD_ERROR

// Replace direct $notify call with helper method
this.notify.error(NOTIFY_CLAIM_CERTIFICATE_LOAD_ERROR.message, TIMEOUTS.LONG);

Phase 3: Template Streamlining

// Template is already simple, no complex logic to extract
// Canvas drawing logic is appropriately contained in methods

Migration Implementation

Step 1: Add PlatformServiceMixin

import { PlatformServiceMixin } from "@/utils/PlatformServiceMixin";

@Component({
  mixins: [PlatformServiceMixin],
})

Step 2: Add Notification Infrastructure

import { createNotifyHelpers, TIMEOUTS } from "@/utils/notify";
import {
  NOTIFY_CLAIM_CERTIFICATE_LOAD_ERROR,
} from "@/constants/notifications";

// Add property
notify!: ReturnType<typeof createNotifyHelpers>;

// Initialize in created()
created() {
  this.notify = createNotifyHelpers(this.$notify);
}

Step 3: Replace Database Operations

// In created() method
const settings = await this.$accountSettings();

// In drawCanvas() method
const allContacts = await this.$getAllContacts();

Step 4: Replace Notification Call

// Replace error notification
this.notify.error(NOTIFY_CLAIM_CERTIFICATE_LOAD_ERROR.message, TIMEOUTS.LONG);

Expected Outcomes

Technical Improvements

• ✅ All database operations use PlatformServiceMixin
• ✅ No raw SQL queries in component
• ✅ All notifications use helper methods and constants
• ✅ Template remains clean and simple
• ✅ Consistent error handling patterns

Functional Preservation

• ✅ Certificate generation and display preserved
• ✅ Canvas drawing functionality preserved
• ✅ Navigation to claim details preserved
• ✅ Error handling and user feedback preserved
• ✅ Contact information display preserved

Performance Improvements

• ✅ Reduced database query complexity
• ✅ Standardized notification patterns
• ✅ Better error handling efficiency

Testing Requirements

Functional Testing

• Certificate generation works for different claim types
• Canvas drawing displays correctly
• Navigation to claim details works
• Error handling displays appropriate notifications
• Contact information displays correctly

Cross-Platform Testing

• Web browser functionality
• Mobile app functionality (Capacitor)
• Desktop app functionality (Electron)
• PWA functionality

Error Scenario Testing

• Network connectivity issues
• Invalid claim ID
• Missing claim data
• Canvas rendering failures
• Database connection issues

Security Audit Checklist

SQL Injection Prevention

• No raw SQL queries in component
• All database operations use parameterized queries
• Input validation for claim ID
• Proper error handling without information disclosure

Data Privacy

• Claim data handled securely
• Contact information access controlled
• No sensitive data in error messages
• Certificate data properly sanitized

Input Validation

• Claim ID validated and sanitized
• Canvas data validated
• URL parameters properly handled
• Image loading validated

Migration Timeline

Estimated Duration: 15-20 minutes

• Phase 1 (Database): 5-7 minutes
• Phase 2 (SQL): 2-3 minutes
• Phase 3 (Notifications): 3-5 minutes
• Phase 4 (Template): 2-3 minutes

Risk Assessment

• Functionality Risk: Low (certificate display is well-contained)
• Data Risk: Low (read-only operations)
• User Impact: Low (feature is secondary to main workflow)

Dependencies

• PlatformServiceMixin availability
• Notification constants in place
• Canvas drawing functionality preserved
• Claim API endpoints accessible

---

Author: Matthew Raymer
Date: 2025-07-08
Purpose: Document ClaimCertificateView.vue migration to Enhanced Triple Migration Pattern