freealberta/influence/DEBUGGING_CUSTOM_RECIPIENTS.md

Debugging Custom Recipients Feature

Changes Made to Fix Checkbox Toggle

Issue

The "Allow Custom Recipients" checkbox wasn't showing/hiding the custom recipients management section when clicked.

Root Causes

1. Event Listener Timing: Original code tried to attach event listeners during init(), but the edit form elements didn't exist yet
2. Not Following Best Practices: Wasn't using event delegation pattern as required by instruct.md

Solution

Switched to event delegation pattern using a single document-level listener:

// OLD (didn't work - elements didn't exist yet):
const editCheckbox = document.getElementById('edit-allow-custom-recipients');
if (editCheckbox) {
    editCheckbox.addEventListener('change', handler);
}

// NEW (works with event delegation):
document.addEventListener('change', (e) => {
    if (e.target.id === 'edit-allow-custom-recipients') {
        // Handle the change
    }
});

Benefits of Event Delegation

1. ✅ Works regardless of when elements are added to DOM
2. ✅ Follows instruct.md rules about using addEventListener
3. ✅ No need to reattach listeners when switching tabs
4. ✅ Single listener handles all checkbox changes efficiently

Console Logs Added for Debugging

The following console logs were added to help trace execution:

1. admin.js init(): "AdminPanel init started" and "AdminPanel init completed"
2. custom-recipients.js load: "Custom Recipients module loading..." and "Custom Recipients module initialized"
3. setupCustomRecipientsHandlers(): "Setting up custom recipients handlers" and "Custom recipients handlers set up with event delegation"
4. Checkbox change: "Custom recipients checkbox changed: true/false"
5. Module init: "Initializing CustomRecipients module for campaign: [slug]"
6. toggleCustomRecipientsSection(): "Toggling custom recipients section: true/false" and "Section display set to: block/none"

Testing Steps

1. Open Browser Console (F12)
2. Navigate to Admin Panel → Look for "AdminPanel init started"
3. Look for Module Load → "Custom Recipients module loading..."

Test Create Form: 4. Switch to Create Tab → Click "Create New Campaign" 5. Check the Checkbox → "Allow Custom Recipients" 6. Verify Info Section Appears → Should see: "Custom recipients can only be added after the campaign is created" 7. Console Should Show: "Create form: Custom recipients checkbox changed: true"

Test Edit Form: 8. Switch to Edit Tab → Select a campaign 9. Check the Checkbox → "Allow Custom Recipients" 10. You Should See:

• "Custom recipients checkbox changed: true"
• "Toggling custom recipients section: true"
• "Section display set to: block"
• "Initializing CustomRecipients module for campaign: [slug]"

11. Verify Section Appears → The "Manage Custom Recipients" section with forms should now be visible

If It Still Doesn't Work

Check the following in browser console:

1. Are scripts loading?

   Look for: "Custom Recipients module loading..."
   If missing: Check network tab for 404 errors on custom-recipients.js
   

2. Is event delegation working?

   Look for: "Custom recipients handlers set up with event delegation"
   If missing: Check if setupCustomRecipientsHandlers() is being called
   

3. Is checkbox being detected?

   Click checkbox and look for: "Custom recipients checkbox changed: true"
   If missing: Check if checkbox ID is correct in HTML
   

4. Is section element found?

   Look for: "section found: [object HTMLDivElement]"
   If it says "section found: null": Check if section ID matches in HTML
   

5. Manual test in console:

   // Check if checkbox exists
   document.getElementById('edit-allow-custom-recipients')
   
   // Check if section exists
   document.getElementById('edit-custom-recipients-section')
   
   // Check if module loaded
   window.CustomRecipients
   
   // Manually toggle section
   document.getElementById('edit-custom-recipients-section').style.display = 'block';
   

Files Modified

• ✅ app/public/js/admin.js - Changed to event delegation pattern, added logging
• ✅ app/public/js/custom-recipients.js - Added loading logs
• ✅ No changes needed to HTML (already correct)

Next Steps After Confirming It Works

1. Remove excessive console.log statements (or convert to debug mode)
2. Test full workflow: add recipient, edit, delete, bulk import
3. Proceed with dashboard.html integration