Complaint Resolution Fix Summary

Problem

The complaint resolution form was failing with a 404 error because it was trying to call a non-existent API endpoint /complaints/api/complaints/{id}/resolve/.

Root Cause

The JavaScript submitResolution() function in templates/complaints/complaint_detail.html was attempting to POST to a /resolve/ endpoint that doesn't exist in the URL configuration.

Evidence:

Template was calling: /complaints/api/complaints/{{ complaint.id }}/resolve/
URL configuration (apps/complaints/urls.py) only had: /complaints/api/complaints/{id}/change_status/
The ComplaintViewSet has a change_status action but NO resolve action

Solution

Updated the submitResolution() function to use the existing change_status endpoint instead of the non-existent resolve endpoint.

Changes Made to `templates/complaints/complaint_detail.html`

// BEFORE (broken):
function submitResolution(event) {
    event.preventDefault();
    
    const form = document.getElementById('resolutionForm');
    const formData = new FormData(form);
    const data = {
        resolution_category: formData.get('resolution_category'),
        resolution: formData.get('resolution'),
        send_notification: document.getElementById('sendResolutionNotification').checked
    };
    
    // ...
    
    fetch(`/complaints/api/complaints/{{ complaint.id }}/resolve/`, {
        method: 'POST',
        // ...
    })
    .then(response => response.json())
    .then(result => {
        if (result.success) {
            alert('Complaint resolved successfully!');
            // ...
        }
    })
}

// AFTER (fixed):
function submitResolution(event) {
    event.preventDefault();
    
    const form = document.getElementById('resolutionForm');
    const formData = new FormData(form);
    const data = {
        status: 'resolved',
        resolution_category: formData.get('resolution_category'),
        resolution: formData.get('resolution'),
        note: 'Complaint resolved with resolution details'
    };
    
    // ...
    
    fetch(`/complaints/api/complaints/{{ complaint.id }}/change_status/`, {
        method: 'POST',
        // ...
    })
    .then(response => response.json())
    .then(result => {
        if (result.message) {
            alert('Complaint resolved successfully!');
            location.reload();
        }
    })
}

Key Changes:

Endpoint URL: Changed from /resolve/ to /change_status/
Request Data: Added status: 'resolved' field
Note Field: Replaced send_notification with note field
Response Handling: Changed from checking result.success to result.message

Why This Works

The existing change_status action in ComplaintViewSet already supports:

Setting status to 'resolved'
Setting resolution and resolution_category fields
Creating timeline entries
Triggering resolution satisfaction survey

The backend code was already properly handling resolution through the change_status endpoint, so the frontend just needed to be updated to use it correctly.

Testing

To verify the fix works:

Navigate to a complaint detail page
Go to the "Resolution" tab
Fill in resolution category and details
Click "Resolve Complaint"
The form should successfully submit and the complaint should be marked as resolved

Files Modified

templates/complaints/complaint_detail.html - Updated submitResolution() JavaScript function

Notes

The send_notification checkbox in the form is no longer used in the data payload
The change_status endpoint handles notification logic internally
Resolution survey triggering is still handled by the backend when status changes to 'closed'

3.7 KiB Raw Blame History